Vue脚手架vue-cli3(4)

vue不支持IE8，因为vue使用了IE8无法模拟的 ECMAScript 5特性

使用vue-cli脚手架会让我们的工作非常方便

比如想编译一下es6的语法就使用 babel loader 和 babel core（可以转换es6代码）

webpack中安装babel loader babel core

npm install --save-dev babel-loader babel-core

下面利用npm安装vue-cli3(4)

（一） 安装：

安装vue-cli只需要安装一次即可
全局安装：npm i -g @vue-cli
或者使用yarn：yarn global add @vue/cli

（二） 项目搭建：

1 在新建文件创建项目：

vue create my-vue (my-vue项目名称，可以自定义)

2 选择默认(default) 或者 手动(Manually) 这里我选择Manually select features手动设置

此处有两个选择：
default (babel, eslint) （ 默认：提供 babel 和 eslint 支持。）
Manually select features （ 手动：提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。）

vue01.jpg

3 选择配置，看个人项目需求

空格键是选中与取消，A键是全选

vue02.jpg

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 Vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

根据自己项目我选择的是，如下图：然后，回车

vue03.jpg

4 是否使用路由器的历史模式？我选择是(Y) 回车

vue04.jpg

5 需要支持何种动态样式语言，（我选择less）

vue05.jpg

6 选择哪个自动化代码格式化检测，配合 vscode 编辑器的（我选择的是：ESLint + Prettier 回车）

vue06.jpg

7 选择语法检查方式（我选择的是：Lint on save ）

Lint on save 保存就检测
Lint and fix on commit fix 和 commit 的时候检查

vue07.jpg

8 希望在哪里放置Babel、PostCSS、ESLint等的配置？（我选择：In dedicated config files）

In dedicated config files 在专用配置文件中
In package.json 在package.json中

vue8.jpg

9 将此保存为将来项目的预设？（我选择：Y）回车

vue9.jpg

（三） 进入项目并启动项目：

cd my-vue 进入到项目的根目录
npm run serve 启动项目

vue10.jpg

（四）浏览器打开 localhost:8080 访问默认主页（成功如下图）

vue11.jpg