VUE 两种创建项目详解
VUE 两种创建项目详解Vue init webpack 创建项目选项详解一、Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。二、Project description:项目描述,直接回车三、Author :作者四、vue build 构建方式(暂且这么解释) 两个选择(上下箭头选择,回车即为选定)(是使用阉割版的vue还是使用完整版的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会把结果值保存在一个文件当中,每次进行测试的时候会把测试值与文件中的结果值进行比较,如果两个结果值不同,那么开发者可以选择要么改变代码,要么替代结果文件。)
- Pick a unit testing solutio(询问项目的测试框架):
- E2E Testing 支持 E2E 测试。
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 询问项目的配置文件存放在哪儿(1是独立文件,2是在package.json)这里选择独立的文件,选择2在后续配置postcs适配时存在问题
更多推荐
所有评论(0)