如何用 vue-cli 4.0 创建项目

本文只介绍如何用 vue-cli 4.0 创建项目，如果想知道怎么搭建开发环境，安装node、webpack...《Vue开发环境搭建全过程》

 

1、找一个放工程的文件夹，在terminal中 cd 到该目录，mac下可以直接把文件夹拖到terminal ，会自动填入路径

 

2、使用vue-cli创建项目，create后面的是项目名

vue create test-project

3、选择项目需要的特性

在这一步你会被提示选取一个 preset。default包含了基本的 Babel + ESLint ，适合快速创建一个新项目的原型。manually(手动选择特性)则提供了更多的选项，需要手动选取需要的特性，更适合面向生产的项目。

我这里按自己项目需要选择了manually以及需要用到的特性，通过键盘的上下按键和空格键来选择你需要的特性，选择完之后按回车键下一步。

这里简单的解释一下这些特性：

babel：语法转义工具、eslint: 代码风格检查工具（就是上面的Linter / Formatter）

TypeScript：JS的扩展、PWA：渐进式网络应用程序、

router：vue路由管理器、vuex：vue状态管理、

Unit Testing：单元测试、E2E Testing：端到端测试

接着就会根据你选择的需要的特性问一堆的问题，这个就要看个人和项目的选择了，最后一句 Save this as a preset for future projects? 是询问你是否保存本次配置。

4、项目创建成功

cd到目录，然后 npm run serve 就能启动项目了

cd test-project
npm run serve

 

到这里项目就搭建完成了，强烈推荐去看我另一篇文章《hygen 自动化创建模板文件神器》