Vue CLI创建TypeScript(vue+ts)项目

2021-03-23 11:29:35 浏览数 (1)

距离 Vue 3 正式发布也有一段时间了,今天突发奇想,来整理一下 “Vue CLI 创建 TypeScript 项目”的具体方法。

首先要安装 node.js ,我就不展开说了,从全局安装 Vue CLI 开始:

使用下列任一命令安装 Vue CLI 最新包:

代码语言:javascript复制
npm install -g @vue/cli
# 或者
yarn global add @vue/cli

升级全局的 Vue CLI 包:

代码语言:javascript复制
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

检查 Vue 版本:

代码语言:javascript复制
vue --version

我现在的版本是:

代码语言:javascript复制
vue -V
@vue/cli 4.5.12

下面开始创建 TS 项目:

使用 Vue CLI 创建一个新项目:

代码语言:javascript复制
vue create hao-w3h5

会让我们选择安装的预设:

代码语言:javascript复制
Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

按键盘上的 ↑ ↓ 键切换选项,这里我们选最后一个 Manually select features (手动选择功能),按下<回车>键。

这时会列出所有的选项:

根据项目需求进行选择,按<空格>键选择,<a>键选择全部,<i>键反向选择。

代码语言:javascript复制
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to
 select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

这里我们选择“TypeScript”,按<回车>键开始安装。

选择 Vue 版本,我这里选择的“3.x (Preview)”,linter 选择 “TSLint”,其他选项都是使用的默认。

代码语言:javascript复制
 Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint   Airbnb config
  ESLint   Standard config
  ESLint   Prettier
> TSLint (deprecated)

config 文件 选择“In package.json”。

代码语言:javascript复制
Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

目录结构如下:

安装成功后,先运行命令安装依赖:

代码语言:javascript复制
npm i
# 或者
yarn

最后执行命令,运行项目:

代码语言:javascript复制
npm run serve
# 或者
yarn serve

这样一个 Vue CLI 的 TypeScript 项目就创建完成了。

未经允许不得转载:w3h5 » Vue CLI创建TypeScript(vue ts)项目

0 人点赞