使用vue-cli3搭建Vue+TypeScript项目

一，创建项目

使用 **npm** 安装 **vue-cli 3 **和**typescript**

npm i -g @vue/cli typescript

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

vue create typescript-vue

typescript-vue 是我的项目名称，执行上面的命令后，出现如下选项

image.png

这里有两个选项可以选择，键盘上下键可以切换选项，按enter进入下一步。这两个分别表示：

• default是默认选项，只会引用 `babel, eslint``
• ``manully select features`是手动选择

这里要用到vue + typescript，所以选择 manully select features 。

image.png

这里是多项选择，按上/下键切换选项，空格键选择该选项，enter键进入下一步。你可以根据项目的实际情况，选择相应的选项。

---

image.png

这里我准备做一个vue-ts学习笔记，后面还会继续学习如何在TypeScript中使用 vuex 和router，所以选择 Babel, Typescript, Router, Vuex, CSS Pre-processors, Linter/ Formatter 这几项就可以了。

按enter，进入下一步：

image.png

这里是询问是否使用 class风格的组件语法，为了更方便地使用 TypeScript，我们选择 Y。

当我们不知道选择那个选项时，可以直接按enter，使用默认选项。

按enter，进入下一步：

image.png

image.png

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

按enter，进入下一步：

image.png

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

按enter，进入下一步：

image.png

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

按enter，进入下一步：

image.png

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

按enter，进入下一步：

image.png

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

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

我们选择 In dedicated config files ，

按enter，进入下一步

image.png

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

我们直接跳过，按enter，等待项目初始化完成就可以了。