共计 1454 个字符，预计需要花费 4 分钟才能阅读完成。
一，创建项目
使用 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 保存，就可以自动修正所有报错了。
