一,创建项目
使用 **npm**
安装 **vue-cli 3 **
和**typescript**
npm i -g @vue/cli typescript
使用**vue create**
命令快速搭建新项目的脚手架
vue create typescript-vue
typescript-vue 是我的项目名称,执行上面的命令后,出现如下选项
这里有两个选项可以选择,键盘上下键
可以切换选项,按enter
进入下一步。这两个分别表示:
-
default
是默认选项,只会引用 `babel, eslint`` - ``manully select features`是手动选择
这里要用到vue + typescript
,所以选择 manully select features
。
这里是多项选择,按上/下键
切换选项,空格键
选择该选项,enter键
进入下一步。你可以根据项目的实际情况,选择相应的选项。
这里我准备做一个vue-ts学习笔记,后面还会继续学习如何在TypeScript中使用 vuex 和router,所以选择 Babel
, Typescript
, Router
, Vuex
, CSS Pre-processors
, Linter/ Formatter
这几项就可以了。
按enter,进入下一步:
这里是询问是否使用 class风格的组件语法,为了更方便地使用 TypeScript,我们选择 Y。
当我们不知道选择那个选项时,可以直接按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,等待项目初始化完成就可以了。