Vue-cli脚手架安装与项目创建

最近在做一个基于Vue的项目，学习了脚手架安装和项目的创建，打算把步骤给写成博客来巩固自己的知识点。

什么是Vue-CLI

Vue-CLI是Vue官方提供的脚手架工具，默认已经帮我们搭建好了一套利用Webpack管理vue项目结构，把项目需要的一些插件都给准备好了。

基于Vscode安装Vue-CLI脚手架

在这之前要安装npm，这里我就不详细讲了，可以通过npm -v查看npm的版本号

1. 在本地新建一个文件夹并用Vscode打开。
2. 打开终端，可以用快捷键 Ctrl+` 打开。
   
3. 在终端输入npm install -g @vue/cli安装脚手架，-g是全局安装，表示以后创建项目就不用再输入此命令了，因为应用到了全局。然后就进入了漫长的等待。
   
4. 安装成功后会显示脚手架的版本号。
   

Vue项目的创建

1. 创建一个Vue项目，使用vue create 项目名称，我的项目名称为demo1。输入命令后会有一些选项，有默认的vue2和vue3，还会安装默认的插件eslint和babel，可以选择默认的Vue3，不过为了以后做项目不需要再手动安装route等其他插件，我们选择Manually select features，用键盘上下键来选择不同的方式。
   

2. 进入插件选择界面，用空格space选择自己所需要的插件，上下键控制，最后按回车键。（这个步骤的图片忘记截图了，用了一下网上的教程的截图，我也是按照这样来选择下载的）然后再选择版本3.x。
   

3. 输入"Y"，选择默认的**> Sass/SCSS (with dart-sass)** 然后再选择默认的规范ESLint + Airbnb config，之后在代码修正的选项中两个都选，Lint on save ，Lint and fix on commit ，再选择配置文件存放方式In package.json输入“y”保存项目设置（在我们最开始设置项目配置时会选择保存这次项目的配置，以后我们用同样的配置做项目时就可以选择这次我们创建的项目模式），最后再输入我们的项目名称demo1就可以了。下面的截图蓝色字体保存了我们每一步选择的选项。
   

4. 等待安装成功，需要等很久。配置成功资源管理器中就会出现demo1这个文件夹，并出现如图所示的说明。

   
   

5. 此时Vue项目demo1创建完成，可是在终端定位的位置是在Vue项目的上一级，需要到自己创建的项目中去，输入cd demo1进入项目，npm run serve运行项目，查看系统分配的端口号。
   

6. 复制网址打开浏览器，项目创建成功。