搭建Vue3+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保存,就可以自动修正所有报错了。

你可能感兴趣的:(VUE)