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

似曾相识

一,创建项目

使用 npm 安装 vue-cli 3typescript

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中使用 vuexrouter,所以选择 Babel, Typescript, Router, Vuex, CSS Pre-processors, Linter/ Formatter 这几项就可以了。

enter,进入下一步:

图片描述

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

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

enter,进入下一步:

clipboard.png

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

enter,进入下一步:

图片描述

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

enter,进入下一步:

clipboard.png

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

enter,进入下一步:

clipboard.png

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

enter,进入下一步:

clipboard.png

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

按enter,进入下一步:

clipboard.png

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

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

我们选择 In dedicated config files

enter,进入下一步

clipboard.png

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

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

二,配置 .prettierrc

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

由于个人习惯于 使用单引号字符串 和 句尾无分号,但是Prettier会将字符串格式化为双引号,并在句尾自动添加分号,因此需要单独配置。配置方法也很简单:

在项目根目录下(与 package.json 同级目录)创建一个 .prettierrc.js文件,并加上以下配置就可以了:

clipboard.png

修改.eslintrc.js文件,加上这行代码就可以了:

clipboard.png

现在我们来看一下是否配置成功了。先打开 sr/main.ts:

clipboard.png

可以看到,双引号字符串 和 句尾的分号 都报错了,这时只需按ctr + s保存,就可以自动修正所有报错了。

clipboard.png

阅读 8.1k
147 声望
4 粉丝
0 条评论
你知道吗?

147 声望
4 粉丝
宣传栏