【Vue-cli 项目搭建】

 注意：该流程基于win11系统，建议直接以管理员身份运行PowerShell，避免后期产生安装错误。

一、安装vue-cli

1.安装Node.js（过程省略）

查看node.js版本信息：

 2.使用npm下载vue-cli

安装命令（Vue CLI官网）：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看安装的vue-cli版本号（查看版本号信息的同时，还能检查是否安装成功）

vue --version

 二、创建项目

1.在所要创建项目的文件夹下打开PowerShell，输入如下命令（Vue CLI官网）：

vue create my-project
# OR
vue ui

命令运行后弹出：

 

 2.通过方向键选择Manually select features（手动选择要素）

使用空格：单一选择，a：全选，i：反选 （根据自己需求选择）

 

Babel：作用是转码，es版本转换，比如es6语法在浏览器不支持，它会帮我们转换到支持的版本；

TypeScript：支持用TypeScript书写项目代码；

Progressive Web App（PWA）Support：渐进式Web应用程序；

Router：支持vue-router，路由跳转；

Vuex：支持VueX，状态管理器(存数据)；

CSS Pre-processors：支持CSS预处理器，例如用到LESS、SASS等预处理工具；

Linter / Formatter：代码风格检查与格式化，例如ESLint，后续选项中选择ESLink +Prettier;

Unit Testing：单元测试，站在开发者的角度，把代码看成一个个组件，在每个组件上进行单元测试；

E2E Testing：端到端测试，站在用户的角度，不管内部怎么实现，只管测试项目从头到尾的流程是不是和最初设计的一样。

3.根据项目需求选择vue版本：

 4.对路由器使用历史模式（Y / n）？n

 5.你更喜欢将 Babel, ESLint等的配置放在哪里? (使用箭头键)

In dedicated config files：单独保存在专用文件中；（选择）

In package.json：将配置写在 package.json 文件中。

 6.将其保存为未来项目的预设? (y/N) N

7.安装成功后的界面：

8.其他

如果选择了Linter / Formatter，安装过程中会出现以下两个选项：

第一个选择：ESLint +Pretter

第二个选择：Lint on save 

三、运行vue初始项目

1.通过提示的命令直接运行：

cd demo

npm run serve

 2.运行成功后，通过浏览器访问 http://localhost:8080/  浏览器界面：