携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
本文主要使用vue cli工具来进行vue3+ts项目的基础框架搭建。
vue CLI安装
首先，需要安装最新版的vue CLI工具包，包的名字是@vue/cli，如果之前安装过旧版本的vue-cli，需要先删除。
npm install -g @vue/cli
安装完成后，可以在终端中通过vue --version来查看版本是否正确，如果显示版本是4.x则就是正确的。
vue3+ts项目创建
在终端中直接vue create test（test为项目名），然后会出现如下的提示项，让选择预制项，这里的选项主要有默认的vue2、默认的vue3以及手动自定义选项。但这里默认的vue3配置并不包括ts等配置，所以在这里我们选择手动自定义功能，来选择我们需要的框架配置。
然后，下一步会让我们选择自己项目所需要的配置项，如下图：
在这里，我们选择babel，typescript，router，vuex以及Linter / Formatter这些选项，选择完成后，按回车继续，然后会依次对我们上述的选择进行配置，如下图：
在这里，我们选择vue3版本，不使用class-style组件，使用babel，使用history路由，然后选择Prettier格式化，最后选择将babel、eslint等的配置统一放在项目的package.json文件当中，当然这些配置也可以将其单独放在其对应的配置文件当中。
上述选择完成后，直接回车就开始项目的自动创建了。
项目运行
上述项目搭建完成后，我们通过启动npm run serve命令，来本地运行下项目，然后，浏览器中打开localhost:8080，默认页面如下：
至此，用vue cli来创建的项目基础框架就完成了，后面会根据这个基础的框架来进行一些配置，如，eslint的一些配置、环境变量的配置、根据viewport进行移动端适配的配置、开发服务器的配置、less样式以及引入全局的样式变量的配置等。
