使用 Vue CLI 创建新项目

目录

一、安装 Vue CLI 的准备

二、Vue CLI3 与 Vue CLI2 版本的区别

三、通过 Vue CLI 创建新项目

四、已有项目链接到远程 GitHub 仓库

---

一、安装 Vue CLI 的准备

使用  Vue CLI 创建新项目之前，首先你需要安装  Vue CLI ，因为 Vue CLI 是基于 node 和 webpack 的，所以还需要在安装  Vue CLI 之前，先安装好 node 和 webpack 。如果还没有安装的话可以参考这里： 安装步骤。

二、Vue CLI3 与 Vue CLI2 版本的区别

1、vue-cli3 是基于 webpack4 打造，vue-cli2 还是 webapck3。

2、vue-cli3 的设计原则是 “0配置”，移除了项目文件根目录下的 build 和 config 等配置文件目录。

3、vue-cli3 提供了vue ui 命令，提供了可视化配置！(看得见)，更加人性化。

4、移除了static文件夹，新增了 public 文件夹，并且 index.html 移动到 public 中。

5、当然，2020 年的 Vue CLI 已经发布的第四版了，不过创建新项目的过程差异不大，你仍然可以继续阅读 ⬇

三、通过 Vue CLI 创建新项目

1、初始化项目命令：

vue create 项目名称    //到指定的路径下 cmd 创建项目，也可以在编译器终端运行该命令

2、执行完初始化项目的命令后会有以下提示：

Please pick a preset：    //(上下箭头选择)
default (babel,eslint)    //默认配置
Manually select features  //手动选择特性    先选这个

3、选择手动选择特性后会有以下提示：

(*)Babel	//es6的代码转译成浏览器能识别的代码
()Typescript
()Progressive web App(PWA)Support	//先进的webapp缓存！支持
()Router
()Vuex
(*)css pre-processors   //css预处理，使用的下一步会提示，建议使用 dart-scss
(*)Linter/ Formatter	//最好把这个取消掉，这是一个ESLinter，保存检测/提交检测，建议后者
(*)unit Testing         //单元测试    Mocha+Chai、Jest，建议后者
()E2E Testing

通过键盘上下箭头移动选项，按空格进行当前选项的选择和取消，选完了直接回车就行了。以上推荐的安装特性可以根据自己的实际情况进行选择安装。

4、选择项目安装的特性之后会有以下提示：

In dedicated config files    //把某些配置放到一些独立的配置文件中	推荐这个
In package.json	    //把配置文件都放到package.json中

5、完成上一步之后会有如下提示：

save this as a preset for future projects?(y/N)

上述提示的意思是：是否将刚才的选择保存为一个 preset，就是说下次项目初始化的时候会用到，我个人在这里建议是 n 。因为项目初始化的步骤也不是特别麻烦，每次创建项目的时候都可以自己根据项目需要重新进行配置选项。

6、完成上述操作就会在你指定的文件路径下创建一个本地的 vue 项目，接下来就可以进行开发了。

四、已有项目链接到远程 GitHub 仓库

大多数的开发项目都会用到 github，如何将创建的本地项目连接到 github上？参考这里