vue-cli 3.0 搭建项目流程
公司最近要开新项目想要使用vue-cli 3.0 搭建项目,今天查了vue-cli 3.0 搭建项目的流程及注意事项,在这里记录一下。
创建项目之前先确定vue-cli、node、及npm的版本,vue-cli 3.0要求node版本在8.0. 以上。
1、创建项目
vue create yaya
2、选择预置配置,选择 Manually select features,按上下箭头可以切换选项,按回车选中。
3、选择项目配置选项,如下图:
在英文输入法状态下,按 '空格键' 选中当前箭头所指选项,按 a 键全选,按 i 键反选,中文输入时a 键和 i 键是输入,不能选择。
看一下这几个选项都是做什么的吧
Babel babel是一种用途很多的javascript编译器,简言之可以让我们在当前的项目中随意的使用javascript最新的es6,甚至es7的语法。
TypeScript TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
Progressive Web App (PWA) Support 渐进式Web应用程序(PWA)支持
Router vue路由管理器
Vuex vue状态管理
CSS Pre-processors css预处理器
Linter / Formatter 格式化规则
Unit Testing 单元测试
E2E Testing
在选择功能后,会询问更细节的配置,
Router:
是否使用history模式:Use history mode for router? (Requires proper server setup for index fallback in production) No
TypeScript:
- 是否使用class风格的组件语法:Use class-style component syntax?
- 是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?
CSS Pre-processors:
- 选择CSS 预处理类型:Pick a CSS pre-processor SCSS/SASS
Linter / Formatter
- 选择Linter / Formatter规范类型:Pick a linter / formatter config Prettier
- 选择lint方式,保存时检查/提交时检查:Pick additional lint features Lint on save
Testing
- 选择Unit测试方式 Jest
- 选择E2E测试方式 Nightwatch
选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
4、 Save this as a preset for future projects? 是否保存当前配置,如果选Y会要求输入配置名字。
如下图:
5、安装成功
// 进入项目文件夹 cd yaya // 启动项目 npm run serve
6、Ps:中间因为网速问题项目安装失败,重新创建项目的时候,选择预置的那个选项里多了我之前保存的yayaPro的项目配置,直接选择就可以了。不过像网上说的目前不知道怎么删除这个配置,以后还是不保存了。
至此,使用vue-cli 3.0 搭建项目完成,项目中遇到别的问题再另外总结吧。