VueCli的使用

---

一项技能久了不用就会变得生疏，在之前做项目的过程中，一开始还能熟练的搭建vuecli，结果到这次需要再次使用的时候，发现已经忘得差不多了；其实也就无外乎那几步，只是搭建用少了，也就容易遗忘，下面是我根据自己的使用习惯，整理出来的关于VueCli的搭建过程。

1. 首先的前提是我们已经安装好了npm包管理工具；因为我们需要通过它来下载vue需要用到的东西；

2. 我们通过新建一个文件夹，在对应的编辑器里面打开该文件夹，然后打开控制台，在控制台我们可以使用下列任一命令安装这个新的包：cnpm install -g @vue/cli 或者 yarn global add @vue/cli，安装之后，可以在命令行中通过vue –version查看是否安装成功，例如3.x；

3. 因为我们的vue serve 的缺点就是它需要安装全局依赖，下面需要安装一个全局的扩展，通过命令行输入：cnpm install -g @vue/cli-service-global；

4. 接下来我们可以通过vue create命令实现新项目的创建。执行命令vue create my-project （my-project 表示项目名）；

5. 选取默认preset，你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。（preset为预设置的意思，vue预先设置了几种模板供我们选择），这里我们先选择默认的包含了基本的Babel + ESLint 设置的 preset。
   

6. 安装完成后我们可以在终端打开我们的项目，然后执行npm run serve将代码运行起来；

7. 执行npm run build实现生产环境的编译和压缩，会生成一个dist文件夹，然后将它放在服务端就能跑起来了；

8. 关于使用的详情呢，也可以通过官网的中文文档进行操作：https://cli.vuejs.org/zh/guide/；