使用vue cli3搭建，Vue3+TypeScript

一、创建项目，使用 npm 安装 vue-cli3 和 typescript
 

npm i -g @vue/cli typescript

使用vue create 命令快速搭建新项目脚手架

vue create vue-ts

vue-ts 使我们的项目名称，执行上面命令，出现如下选项：

这里是单项选择，按上下键切换，按enter进行下一步：

• Default 是默认选项，后面的 babel、eslint 表示只会引入这两个
• Manually select features 是手动选择

我们要用到Vue+TypeScript , 所以选择 Manually select features , 按 enter 到下一步

 这里是多选项，按 上下键 切换，空格 表示选择该项，enter 到下一步，根据自己实际情况选择对应选项。

这里我选择了 Babel 、TypeScript 、Router 、Vuex 、CSS Pre-processors、Linter/Formatter

按enter到下一步：

 

 选3.x，按enter进到下一步：

 这里是问是否使用 class 风格的组件语法，为了更方便使用 typescript ，选择 y ，按enter 到下一步：

 是否使用 Babel 编译 TS 语法
 TypeScript 本身就有编译功能，默认会把 JavaScript 代码转换为 ECMAScript 3 版本兼容的代码
 如果你需要现代模式、自动检测 polyfill、转换 JSX 语法等功能，则建议开启这个选项
 当选择以后，TypeScript 本身只会把代码转为 ESNext，也就是最新版的 ECMAScript 规范
 然后由 Babel 把 ECMAScript 转换为低版本 JavaScript，例如 ECMAScript 5，以及自动检测 polyfill、转换 JSX 等功能
 说白了就是让 TypeScript 转换和 Babel 转换相结合起来一起使用

选择y， 按enter 到下一步：

这里是询问是否使用 router 的 history模式，如果选择是，在生产环境中，服务端需要为索引回退做适当的配置。这个对我们的 demo 没有影响，同样按enter使用默认选项。

 这里是选择 CSS预处理器，可以自行选择一种。

 这里是选择代码检查工具，我个人喜欢使用 ESLint + Prettier。因为 Prettier 不仅可以格式化js代码，还可以格式化 css 和 vue模板文件中 template 部分的代码。

这里是选择什么时候进行代码格式化，选择 Lint on save。

这里是询问在什么地方配置 Babel，PostCSS, ESLint 等

• In dedicated config files 在专门的配置文件中
• In package.json 配置在package.json文件中

我们选择 In dedicated config files 

 是否保存本次所选的配置，方便下次搭建项目时复用。

直接enter ,等待项目初始化完成。