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

一，建立项目

使用 npm 安装 vue-cli 3 和typescript

npm i -g @vue/cli typescript 

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

vue create vue-ts 

vue-ts 是咱们的项目名称，执行上面的命令后，出现以下选项

这里是单项选择，能够按上/下键切换选项，按enter进入下一步。这两个选项分别表示：

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

由于咱们要用到 Vue+TypeScript，因此选择 Manully select features。

按enter，进入下一步：

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

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

按enter，进入下一步：

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

当咱们不知道选择那个选项时，能够直接按enter，使用默认选项。

按enter，进入下一步：

这里不太清楚是什么意思，直接跳过，按enter使用默认选项。

按enter，进入下一步：

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

按enter，进入下一步：

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

按enter，进入下一步：

这里是选择代码检查工具，我我的喜欢使用 ESLint + Prettier。由于 Prettier 不只能够格式化js代码，还能够格式化 css 和 vue模板文件中 template 部分的代码。

按enter，进入下一步：

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

按enter，进入下一步：

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

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

咱们选择 In dedicated config files ，

按enter，进入下一步

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

咱们直接跳过，按enter，等待项目初始化完成就能够了。

二，配置 .prettierrc

代码检查工具选择ESLint + Prettier时，ESLint与Prettier相冲突的配置项会被关闭，采用的是Prettier的配置项。这个文档，列出了ESLint与Prettier冲突的配置项。

因为我的习惯于 使用单引号字符串 和 句尾无分号，可是Prettier会将字符串格式化为双引号，并在句尾自动添加分号，所以须要单独配置。配置方法也很简单：

在项目根目录下（与 package.json 同级目录）建立一个 .prettierrc.js文件，并加上如下配置就能够了：

修改.eslintrc.js文件，加上这行代码就能够了：

如今咱们来看一下是否配置成功了。先打开 sr/main.ts：

能够看到，双引号字符串 和 句尾的分号 都报错了，这时只需按ctr + s保存，就能够自动修正全部报错了。