一、安装脚手架
安装命令如下
npm install -g @vue/cli
yarn global add @vue/cli
检测版本
vue --version
二、创建项目
1.创建项目开始,定义名称
vue create [appName]
例如创建一个名称为 testapp 的项目命令为
vue create testapp
2 选择配置类型
按方向键选择,按enter确认
第一个为默认配置,包含eslint 和 babel
第二个为自定义配置
3 各项配置设置
操作方式
按方向键进行上下选择
按空格 选中
按A键全选
按I键全选
按enter 确认所有配置进入下一步
(1)babel
是否引入转码功能,该项功能可将es6转码成es5
(2) TypeScript
是否引入ts,引入后可使用ts进行编程
(3)Progressive Web App (PWA) Support
是否引入渐进式Web应用程序(PWA)支持 (pwa为应用多项技术的web app。核心技术包括 App Mainfest、Service Worker、Web Push,等等)
(4)Router
是否引入vue-router
(5)vuex
是否引入状态管理
(6)css-processors
是否引入css预处理
(7) linter / formatter
是否引入格式验证
(8) Unit Testing
是否引入单元测试
(9)e2e Testing
是否引入 end to end 测试
上述选完后点击enter 可看到所有选中的设置项
4 针对上述选中项进行单独配置
(1) 开启vue router
选择路由模式 是否启用history模式(默认是hash模式)
(2)开启 css pre-process
选择css 预处理方式 箭头选择 enter确认
依次为 dart-sass dart编写的sass
node-sass node编写的sass
less
stylus
(3) 开启linter/formatter
ESLint with error prevention only 只有报错功能
ESLint + Airbnb config 简化模式
ESLint + Standard config 标准模式
ESLint + Prettier 严格模式
(4)选择校验时机
lint on save 保存即检验
lint and fix on commit 提交时进行检验及修改
(5)选择单元测试方案
Mocha + Chai
Jest
(6)选择e2e测试方案
Cypress (Chrome only) 只能在chorme中使用
Nightwatch (WebDriver-based)
5 保存配置位置
In dedicated config files 额外文件中
package.json package.json中