目录
一、安装 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上?参考这里