vue-cli的版本查看
vue -V
vue-cli的3.0+以后使用的不是vue-cli了,如果安装3.0的话就需要使用新的命令,如下:
npm install @vue/cli -g
vue/cli4的安装与使用
- 若你已安装过vue-cli3一下的版本的话,你得先卸载掉,命令如下:
//首先查看是否已安装过 vul-cli 和 vul-cli 的版本
vue -V
//如是有的话且版本小于3.0,就用下面命令卸载
npm uninstall vue-cli -g
- 安装vue-cli 3.0以上版本(目前是4.5.8)
// 安装vue-cli
npm install @vue/cli -g
//也可使用cnpm 来安装 ,比较快(前提是使用了淘宝镜像)
cnpm install @vue/cli -g
- 创建一个项目
//1. 命令 回车
vue create 项目名
//2.选择自定义配置
Manually select features
//3.选择你需要的配置(用空格选中)
Babel (必选)
TypeScript(项目中使用ts开发的话,就勾选)
Progressive Web App (PWA) Support (接口缓存,优化项目)
Router
Vuex
CSS Pre-processors (css预处理器,需要)
Linter / Formatter (代码格式,一般默认选中)
Unit Testing (代码测试)
E2E Testing(需求界面测试)
//4.根据你选的配置进行Y/N选择
//5.选择完之后,就可以运行项目
npm run serve
-
创建项目配置说明
babel:
是解析我们es6的代码的,为什么要用它呢?是因为对于一些ie浏览器,甚至其他的浏览器的低版本,还不能识别es6代码,但是vue里面好多es6的代码,这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码。所以必须要选择。TypeScript
如果项目中使用typescripy开发的话,就选择Progressive Web App(PWA)
渐进式网络应用程序(Progressive Web Apps)
渐进式Web应用程序是将最佳网络和最佳应用程序相结合的体验。从浏览器选项卡中的第一次访问开始,它们对用户非常有用,无需安装。随着用户逐渐与应用程序建立关系,它变得越来越强大。即使在片状网络上,它也能快速加载,发送相关的推送通知,主屏幕上有一个图标,并作为顶级全屏体验加载。Router
路由,有需要就选择,也可以之后引入Vuex
仓库,有需要就选择,也可以之后引入CSS pre-processor
选择css预处理Linter/Formatter
代码风格、格式校验a. ESLint with error prevention only
只配置使用 ESLint 官网的推荐规则b. ESLint + Airbnb config
使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置c. ESLint + Standard config
使用 ESLint 官网推荐的规则 + Standard 第三方的配置d. ESLint + Prettier
使用 ESLint 官网推荐的规则 + Prettier 第三方的配置
Prettier 主要是做风格统一。代码格式化工具Unit Testing
代码测试E2E Testing
需求界面测试pick additional lint features
代码校验
Lint on save (保存就检查)
Lint and fix on commit(fix和commit时候检查)Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
存放配置
In dedicated config files(保存到其他专用配置文件里)
In package.json(保存到package.json里面)