Web前端开发资源网距离 Vue 3 正式发布也有一段时间了，今天突发奇想，来整理一下 “Vue CLI 创建 TypeScript 项目”的具体方法。
首先要安装 node.js ，我就不展开说了，从全局安装 Vue CLI 开始：
使用下列任一命令安装 Vue CLI 最新包：
npm install -g @vue/cli # 或者 yarn global add @vue/cli
升级全局的 Vue CLI 包：
npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli
检查 Vue 版本：
vue --version
我现在的版本是：
vue -V @vue/cli 4.5.12
下面开始创建 TS 项目：
使用 Vue CLI 创建一个新项目：
vue create hao-w3h5
会让我们选择安装的预设：
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>键反向选择。
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”，其他选项都是使用的默认。
Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier > TSLint (deprecated)
config 文件 选择“In package.json”。
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files > In package.json
目录结构如下：
安装成功后，先运行命令安装依赖：
npm i # 或者 yarn
最后执行命令，运行项目：
npm run serve # 或者 yarn serve
这样一个 Vue CLI 的 TypeScript 项目就创建完成了。
未经允许不得转载：Web前端开发资源网 » Vue CLI创建TypeScript（vue+ts）项目
推荐阅读：
jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）