Vue Cli3以上版本项目构建

一、升级Vue Cli

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先卸载老版本

npm uninstall vue-cli -g
#OR
yarn global remove vue-cli

1）查看当前版本

vue --version
#OR
vue -V

2）安装最新版本

npm install -g @vue/cli
#OR
yarn global add @vue/cli

3）npm安装Vue Cli 时可能出现安装失败

在这里插入图片描述
可能是由于npm不稳定导致，使用cnpm安装可以解决

cnpm install -g @vue/cli

4）检查是否安装成功

vue --version
#OR
vue -V

二、构建项目

运行以下命令来创建一个新项目：

vue create demo

在这里插入图片描述

yushe //自定义的安装方案
Default //提供的方案
Manually select features // 手动选择配置，可以将选中的配置添加到自定义配置

选择手动配置，空格选中取消配置，回车确认
在这里插入图片描述

Choose Vue version // 选择vue版本
Bable // es高版本转换为低版本
TypeScript // 使用TS语法
Progressive Web App (PWA) Support // Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。
Router // 路由
Vuex // 专为 Vue.js 应用程序开发的状态管理模式
CSS Pre-processors  // css预处理器
Linter / Formatter	// 代码提示
Unit Testing	// 单元测试
E2E Testing	// 端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期

选择vue版本，这里使用2.x

选择vue版本
是否使用路由的history模式，建议使用
在这里插入图片描述
选择一个要用的预处理语言，这里选的node-sass

ESLint自动化代码格式化检测，分别为，只预防、Airbnb配置、标注配置、最高配置，

什么时候检查代码，保存时，和提交时

配置文件存放位置是单独文件还是 package.json内
在这里插入图片描述
是否将本次配置保存，方便下次使用

输入配置名称后回车开始创建项目