VUE 两种创建项目详解

VUE 两种创建项目详解

Vue init webpack 创建项目选项详解

一、Project name :项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。
二、Project description:项目描述，直接回车
三、Author ：作者
四、vue build 构建方式（暂且这么解释）
　　两个选择（上下箭头选择，回车即为选定）(是使用阉割版的vue还是使用完整版的vue 第一个是完整版的 第二个是阉割版的)
　　1.Runtime + Compiler:recommended for most users
　　(译：运行+编译：被推荐给大多数用户)
　　2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
　　allowed in .vue files-render functions are required elsewhere
　　(译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择该构建方式对文件大小有要求)
　　这里推荐使用1选项，适合大多数用户的
五、install vue-router？是否安装vue的路由插件，需要就选y，否则就n（以下均遵循此方法）
六、Use ESLint to lint your code?是否使用ESLint检测你的代码？
　　（ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）
七、Pick an ESLint preset:选择分支风格
　　选项有三个
　　1.standard(https://github.com/feross/standard) js的标准风格
　　2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法
　　3.none (configure it yourself) 自己配置
八、Set up unit tests? 是否安装单元测试（暂不详细介绍）
Pick a test runner 选择一个单元测试运行器
选项有三个
1.Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架）
2.Karma and Mocha
3.none
九、Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。）
Should we run ‘npm install’ for you after the project has been created?(译：项目创建后是否要为你运行“npm install”?这里选择包管理工具)
　　选项有三个
　　yes,use npm(使用npm)
　　yes,use yarn(使用yarn)
　　no,I will handle that myself(自己配置安装包)

Vue create project 创建项目选项详解

• default (babel, eslint)默认套餐，提供babel和eslint支持
• Manually select features自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。
vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。

• TypeScript 支持使用 TypeScript 书写源码
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
  • Use history mode for router? (Requires proper server setup for index fallback in production) 询问项目的路由模式是否使用History Yes
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
  • Sass/SCSS（with dart-sass）是用 node(调用 cpp 编写的 libsass)来编译 sass，dart-sass 性能更好（也是 sass 官方使用的）
  • Sass/SCSS（with node-sass）是用 drat VM 来编译 sass，node-sass是自动编译实时的，dart-sass需要保存后才会生效。
• Linter / Formatter 支持代码风格检查和格式化。
  • ESLint with error prevention only （仅具有错误预防功能）
  • ESLint + Airbnb config （Airbnb配置）
  • ESLint + Standard config （标准配置）
  • ESLint + Prettier （更漂亮）
  • Pick additional lint features（询问项目的什么时候校验格式）：
    • Lint on save（保存时）
    • Lint and fix on commit（提交时）
• Unit Testing 支持单元测试。
  • Pick a unit testing solutio（询问项目的测试框架）：
    • Mocha +Chai （Mocha是JavaScript界中最受欢迎的一款单元测试框架，1、灵活，和更多的一些库结合使用，2、资料较多。）
    • Jest（Jest是由facebook发布，1、容易安装配置；2、提供snapshot功能。snapshot功能能够确保UI不会意外被改变。Jest会把结果值保存在一个文件当中，每次进行测试的时候会把测试值与文件中的结果值进行比较，如果两个结果值不同，那么开发者可以选择要么改变代码，要么替代结果文件。）
• E2E Testing 支持 E2E 测试。
  Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 询问项目的配置文件存放在哪儿（1是独立文件，2是在package.json）这里选择独立的文件，选择2在后续配置postcs适配时存在问题