[JavaScript知识库]vue-cli小手架

一、第一次创建项目

1.安装vue-cli

- 需要安装 node js环境   
- $ npm install -g @vue/cli // 安装cli3.x

2.命令行

vue create filename（文件名）

3.选择模

• 一开始只有两个选项: default(默认配置)和Manually select features(手动配置)
• 下面是手动配置

4.选择配置

• 空格键选中或取消，一进去的有两个默认的。不要改

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript				// 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support  
 ( ) Router					// 支持 vue-router
 ( ) Vuex					// 支持 vuex
 ( ) CSS Pre-processors     // 支持 CSS 预处理器。
 (*) Linter / Formatter		// 支持代码风格检查和格式化
 ( ) Unit Testing			// 支持单元测试。
 ( ) E2E Testing

5.是否使用路由的history模式：

• 这里我建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，可以自己设置。 直接按回车就好

6.选择css预处理器:

根据个人使用
 Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

7.选择Eslint代码验证规则：

ESLint with error prevention only 
  ESLint + Airbnb config
> ESLint + Standard config   //标准配置，也可以直接选择默认
  ESLint + Prettier

8.选择什么时候进行代码规则检测：

默认就好，当然你下面那个要选上也行
 (*) Lint on save  // 保存就检测
 ( ) Lint and fix on commit // fix和commit（提交）时候检查并修复

9. 把babel,postcss,eslint这些配置文件放哪

  > In dedicated config files // 独立文件放置
    In package.json // 放package.json里

10.是否保存配置：

Save this as a preset for future projects? (Y/n) 
// 是否记录一下以便下次继续使用这套配置

// 选保存之后，会让你写一个配置的名字：
Save preset as:  name // 然后你下次进入配置可以直接使用你这次的配置了