【vue】vue项目的步骤流程和详解

目录

1.先配置安装环境

2.创建项目

2.1 使用脚手架创建vue项目: vue create test(项目名)

2.2 选择第三个自定义添加

2.3 选择配置，一般勾选以下配置（按上下箭头选择，按空格选中）

2.4 选择版本（根据自己项目要求选择）

2.5 路由采用history模式，输入y

2.6 选择第一项CSS预处理器 

2.7 选择代码规范（我这里选择第四个）

2.8 选择何时代码检测（选第一个）

2.9  Babel、ESLint 等的配置存放位置（选第二）

2.10  上述选择是否存为模板（根据个人选择）

2.11  按回车，等待创建完成

 3.启动项目

3.1 cd进入到项目目录，输入启动命令：npm run serve

3.2 打开链接即可启动项目

---

1.先配置安装环境

 详细安装过程请看： node.js安装配置以及vue3.0脚手架安装

2.创建项目

2.1 使用脚手架创建vue项目: vue create test(项目名)

 2.2 选择第三个自定义添加

• Default([Vue 3] babel, eslint):vue3的项目，只包含js编译器babel，代码检测工具eslint。
• Default([Vue 2] babel, eslint):vue2的项目，只包含js编译器babel，代码检测工具eslint。
• Manually select features:自定义添加选择功能。

2.3 选择配置，一般勾选以下配置（按上下箭头选择，按空格选中）

• Babel：js编译器
• Typescript：js的超集
• Progressive Web App Support：渐进式的网页应用程序
• Router：vue的路由
• Vuex：vue的状态管理
• CSS Pre-processors：css的预处理器
• Linter/Formatter：代码风格检测与格式化(如果自己代码不是很规范的话可以用这个约束下自己,也可不选择，按照自己的风格)
• Unit Testing：单元测试
• E2E Testing：端对端测试

 2.4 选择版本（根据自己项目要求选择）

 2.5 路由采用history模式，输入y

路由模式有两种：

• hash：即地址栏URL中的 # 符号；如http://www.abc.com/#/home
• history：利用了HTML5 History Interface 中新增的 pushState() 和 replaceStae()方法。
• 上述两种模式区别就在于URL中是否有 "#" 这个符号的问题。一般选y

 2.6 选择第一项CSS预处理器 

• Sass/Scss（with dart-sass）: dart编译模式
• Less：less编译模式
• Stylus：style编译模式

 2.7 选择代码规范（我这里选择第四个）

 2.8 选择何时代码检测（选第一个）

2.9  Babel、ESLint 等的配置存放位置（选第二）

 2.10  上述选择是否存为模板（根据个人选择）

  2.11  按回车，等待创建完成

 3.启动项目

3.1 cd进入到项目目录，输入启动命令：npm run serve

 3.2 打开链接即可启动项目