一、创建项目
1、语法格式
vue create <项目名>
注意: 项目名 不支持驼峰(含大写字母)
建议使用 使用全部小写字母跟字母之间使用短横线
2、栗子
vue create vue-example
二、选项信息
1、预设配置
如果之前有创建过项目并保存了配置 会提示多出一个预设的配置选项
2、默认设置
default(babel,eslint)
默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包
3、自定义配置
Manually select features
提供可选的包的信息
三、自定义配置
1、说明
命令行创建项目需要用:
方向键选择相关选项,回车进入下一级
空格键 选择/取消选择
A键全选/取消全选
2、选项概要
>( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript包含并扩展了JavaScript的语法,需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing //(end to end) 测试
3、Babel
转化器, 可以将ES6代码转为ES5代码
4、Router
是否使用history router
-
hash
默认值,浏览器url址栏中带#符号
-
history
单页客户端应用(比如移动端应用)
5、Vuex
vue的状态管理
6、Progressive Web App (PWA) Support
PWA全称Progressive Web App,直译是渐进式WEB应用
7、预处理器
主要为css解决浏览器兼容、简化CSS代码等问题(Sass诞生于2007年,最早也是最成熟的一款CSS预处理器语言)
选择一个你熟悉的预编译语言(LESS)
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
//Sass安装需要Ruby环境,是在服务端处理的,SCSS 是 Sass3新语法(完全兼容 CSS3且继承Sass功能)
SCSS/SASS
//Less最终会通过编译处理输出css到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
LESS
//Stylus主要用来给Node项目进行CSS预处理支持,Stylus功能上更为强壮,和js联系更加紧密,可创建健壮的、动态的的CSS。
Stylus
8、ESLint
提供一个插件化的javascript代码检测工具(新手不建议开启)
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
9、检测时机
? Pick additional lint features: (Press to select, to toggle all, to invert selection)
// 保存就检测
( ) Lint on save
// fix和commit时候检查
( ) Lint and fix on commit
9、单元测试
? Pick a unit testing solution: (Use arrow keys)
//mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Mocha + Chai
//安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
Jest
10、存放配置的路径
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
// 独立文件放置
In dedicated config files
// 放package.json里
In package.json
11、是否保存本次配置
// y:记录本次配置,然后需要你起个名; n:不记录本次配置
? Save this as a preset for future projects? (Y/n)