vue项目搭建（完整步骤）

一、安装环境

1.安装Node.js

下载地址：https://nodejs.org/zh-cn/
建议下载长期维护版

下载完成后打开，一直下一步最后点击install就好了
这里建议不要安装到C盘

2.验证Node.js是否安装完成

在终端中输入Node -v

这里需要注意一下，如果是在vscode的内置终端中输入Node -v 可能会这样
将Vscode全部关闭之后，使用管理员身份打开就好了

二、安装vue脚手架（vue-cli）

1.安装cnpm

可以通过npm，yarn进行安装，因为我这里安装了Node，Node内置有NPM，所以无需进行安装，如果NPM安装的速度太慢，可以使用淘宝的镜像源（如果NPM安装速度快的话可以直接跳过这一步）

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v：查看安装是否完成

2.全局安装Vue-CLI

npm install -g @vue/cli  //国外下载
cnpm install -g @vue/cli //镜像源下载（需要安装cnpm）
# OR
yarn global add @vue/cli

检查安装是否完成

vue --version

三.搭建VUE项目

1.创建文件

vue create（项目名）

保存的配置：当手动配置完成以后选择是否保存该配置时保存的
自动安装Vue3.x：回车后便会自动安装3.x版本的Vue
自动安装Vue2.x：回车后便会自动安装2.x版本的Vue
手动配置：需要自己手动的去配置自己的喜好
我们这里选择手动配置（↓选择到Manually select features回车选择）

2.选择配置

空格选择，回车下一步！！！
Babel：Babel是一个 JavaScript 编译器。（必选）
TypeScript：TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。
Progressive Web App (PWA) Support：渐进式网页应用
Router：Vue.js 的官方路由（必选）
VueX：是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
CSS Pre-processors：CSS预处理
Linter / Formatter：代码风格、格式校验（建议有一定基础在选择）
Unit Testing： 单元测试，对软件中的最小可测试单元进行检查和验证。
E2E Testing：自动化测试框架
具体需要安装哪些内容，根据自己的喜好进行安装，我这边给一个常用的配置

3.选择搭建的vue版本

我这里安装的是2.x的版本，回车下一步。

4.路径模式选择

按需选择我这里是输入Y，回车下一步

5.选择CSS预处理器

因为我一直用的是Sass所以选择的是Sass，在选择配置中如果没有选择CSS Pre-processors，则不会出现这个选择，直接跳过不影响

6.选择ESLint配置

建议选择第三个ESLint + Standard config 标准模式

7.代码格式检查时间

选择第一个Lint on save，保存时检查

8.配置文件存放位置

选择In dedicated config files ，单独的配置文件中

9.是否保存该配置

此处按需选择，如果选择Y则需要输入配置的姓名即可

四.运行VUE项目

cd (项目名)

npm run serve

Alt+左键点击就可以打开了

当看到这个界面就代表搭建成功了！