【Vue】项目创建目录初始化

文章目录

  • vue-cli 建项目
  • 调整初始化目录结构

vue-cli 建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create hm-shopping
  • 选项
Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
> Manually select features     选自定义
  • 手动选择功能

68294185617

  • 选择vue的版本
  3.x
> 2.x
  • 是否使用history模式

image-20201025150602129

  • 选择css预处理

image-20220629175133593

  • 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)

    比如:const age = 18; => 报错!多加了分号!后面有工具,一保存,全部格式化成最规范的样子

    第三个为无分号规范(标准化),目前最流行的一个规范

68294191856

  • 选择校验的时机 (直接回车)

68294193579

  • 选择配置文件的生成方式 (直接回车)

68294194798

  • 是否保存预设,下次直接使用? => 不保存,输入 N

68294196155

  • 等待安装,项目初始化完成

68294197476

  • 启动项目
npm run serve

调整初始化目录结构

强烈建议大家严格按照老师的步骤进行调整,为了符合企业规范

为了更好的实现后面的操作,我们把整体的目录结构做一些调整。

目标:

  1. 删除初始化的一些默认文件
  2. 修改没删除的文件
  3. 新增我们需要的目录结构

1.删除文件

  • src/assets/logo.png
  • src/components/HelloWorld.vue
  • src/views/AboutView.vue
  • src/views/HomeView.vue

2.修改文件

main.js 不需要修改

router/index.js

删除默认的路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [
]const router = new VueRouter({routes
})export default router

App.vue

<template><div id="app"><router-view/></div>
</template>

3.新增目录

  • src/api 目录
    • 存储接口模块 (发送ajax请求接口的模块)
  • src/utils 目录
    • 存储一些工具模块 (自己封装的方法)

目录效果如下:

image-20230616184644176

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/25519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web开发之jQuery

探索jQuery&#xff1a;简化JavaScript开发的利器 在现代Web开发中&#xff0c;JavaScript是不可或缺的技术&#xff0c;而jQuery作为最流行的JavaScript库之一&#xff0c;极大地简化了JavaScript编程。本文将带你深入了解jQuery&#xff0c;包括其历史背景、核心功能、常见用…

new RegExp(Reg).test(value)无效

目录 前沿 问题分析 eval 函数 # 定义和用法 # 语法 # 浏览器支持 # 实例 使用eval函数 优化 拓展 —— 要么旅行&#xff0c;要么读书&#xff0c;身体和灵魂必须有一个在路上。 前沿 之前写过一篇正则表达式的基础&#xff1a;http://t.csdnimg.cn/45Da3 今天继…

K8s 集群高可用master节点ETCD全部挂掉如何恢复?

写在前面 博文内容涉及集群 ETCD 全部挂掉&#xff0c;通过备份文件恢复的操作 Demo理解不足小伙伴帮忙指正 &#x1f603;,生活加油 不必太纠结于当下&#xff0c;也不必太忧虑未来&#xff0c;当你经历过一些事情的时候&#xff0c;眼前的风景已经和从前不一样了。——村上春…

张霖浩在娱乐“名利场”玩出“修罗场”的贵族范儿

众所周知娱乐圈是个大型“名利场”&#xff01;近日&#xff0c;2025年北京广播电视台春晚发布会现场&#xff0c;众大咖汇聚&#xff0c;妆容、装扮、穿搭&#xff0c;更是争奇斗艳、八仙过海各显神通。同时&#xff0c;也揭露出娱乐圈当下穿搭界”修罗场”的残酷现实。在出彩…

AI智能体的分级

技术的分级 人们往往通过对一个复杂的技术进行分级&#xff0c;明确性能、适用范围和价值&#xff0c;方便比较、选择和管理&#xff0c;提高使用效率&#xff0c;促进资源合理分配和技术改进和标准化。 比如&#xff0c;国际汽车工程师学会&#xff08;SAE&#xff09;定义了自…

2024年第三届数据统计与分析竞赛(B题)数学建模完整思路+完整代码全解全析

你是否在寻找数学建模比赛的突破点&#xff1f;数学建模进阶思路&#xff01; 详细请查 作为经验丰富的数学建模团队&#xff0c;我们将为你带来2024年第三届数据统计与分析竞赛&#xff08;B题&#xff09;的全面解析。这个解决方案包不仅包括完整的代码实现&#xff0c;还有…

C/C++|关于 namespace 在C++中的代码组织

命名空间&#xff08;namespace&#xff09;在C中用于组织代码&#xff0c;避免命名冲突&#xff0c;并提供更好的代码结构和可读性。下面详细解释命名空间在C多文件编写中的各种作用和表达。 基本概念 命名空间是一个声明区域&#xff0c;用于组织代码&#xff0c;防止不同部…

排序题+贪心

排序力扣题 一&#xff1a;合并区间 56. 合并区间 方法一&#xff1a;先排序再合并 如图&#xff0c;把区间按照起点从小到达排序&#xff0c;如果起点相同那么按照终点小的优先排序 然后每次记录一个区间&#xff0c;访问下一个区间&#xff1a; 如果下一个区间的起点<前…

Java基础(7) Object类

目录 一、Object类是什么&#xff1f; 1.定义 2.作用 二、Object类的方法之equals() 1. 2.equals() 3.和equals的区别 三、Object类的方法之toString() 四、Object类的方法之clone() 1.定义 2.基本概念 3.使用clone()方法的步骤 4.举例 五、Object类的方法之final…

自动化测试文档

自动化测试文档的类型 自动化测试方案&#xff1a; 目的&#xff1a;描述自动化测试的目标、范围、方法、资源等。内容&#xff1a;通常包含测试计划、测试用例设计、测试环境配置、测试执行策略、预期结果、风险评估等。自动化测试脚本&#xff1a; 目的&#xff1a;用于执行…

Redis与缓存失效策略:实现高效的数据过期处理

I. 引言 A. 介绍Redis的用途和作用,特别强调其在缓存方面的重要性 Redis是一种开源的,基于内存的数据结构存储系统,支持多种类型的数据结构,如字符串、列表、集合、哈希表、有序集合等。由于其高速的读写性能,Redis被广泛应用为缓存系统,提升应用的响应速度和扩展能力。…

Vue TypeScript 实战:掌握静态类型编程

title: Vue TypeScript 实战&#xff1a;掌握静态类型编程 date: 2024/6/10 updated: 2024/6/10 excerpt: 这篇文章介绍了如何在TypeScript环境下为Vue.js应用搭建项目结构&#xff0c;包括初始化配置、创建Vue组件、实现状态管理利用Vuex、配置路由以及性能优化的方法&#x…

数据中心网络运维探讨

数据中心网络运维探讨 数据中心网络运维通过科学的网络架构设计、实时监控管理、智能化运维工具和全面的安全防护&#xff0c;确保网络的高效、安全运行。它不仅提升了运维效率和网络可靠性&#xff0c;还保障了业务的连续性和数据安全。随着技术的不断进步&#xff0c;智能化…

推测性解码:加速多模态大型语言模型的推理

大模型&#xff08;LLMs&#xff09;以其卓越的性能在多个应用场景中大放异彩。然而&#xff0c;随着应用的深入&#xff0c;这些模型的推理速度问题逐渐凸显。为了解决这一挑战&#xff0c;推测性解码&#xff08;Speculative Decoding, SPD&#xff09;技术应运而生。本文深入…

volatile、extern、static关键字

一、volatile volatile关键字用于告诉编译器&#xff0c;一个变量的值可能在程序执行期间以不可预见的方式发生变化&#xff0c;编译器不应对该变量进行优化。即&#xff1a;编译器不能对这个变量进行优化&#xff0c;必须每次都从内存中读取它的值&#xff0c;而不能缓存到寄存…

Vue 2看这篇就够了

Vue 2 技术文档 Vue.js 是一款用于构建用户界面的渐进式框架。与其他重量级框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。而 Vue.js 2&#xff08;以下简称 Vue…

Vue2基础:.sync修饰符的使用,认识,作用,本质案例演示,实现父子之间的通信。

.sync的作用&#xff1a; 可以实现子组件与父组件数据的双向绑定&#xff0c;简化代码。 与v-model的不同点,prop属性名可以自定义&#xff0c;不要一定要用value. .sync的本质&#xff1a; 就是&#xff1a;属性名和update&#xff1a;属性名合写。 下面我们进行代码演示…

探索智慧景区票务系统的架构与应用

随着旅游业的迅速发展&#xff0c;智慧景区票务系统已经成为提升景区管理效率、优化游客体验的重要工具。智慧景区票务系统的架构设计与应用&#xff0c;将现代信息技术与景区管理相结合&#xff0c;为景区的门票销售、入园管理和游客服务提供了全新的解决方案。本文将深入探讨…

每天一个数据分析题(三百五十六)-图表决策树

图表决策树中将图表分成四类&#xff0c;分别是&#xff1f; A. 比较类 B. 序列类 C. 构成类 D. 描述类 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案

【西瓜书】9.聚类

聚类任务是无监督学习的一种用于分类等其他任务的前驱过程&#xff0c;作为数据清洗&#xff0c;基于聚类结果训练分类模型 1.聚类性能度量&#xff08;有效性指标&#xff09; 分类任务的性能度量有错误率、精度、准确率P、召回率R、F1度量(P-R的调和平均)、TPR、FPR、AUC回归…