## 快速构建一个vue3+TS的全家桶项目
随着Vue3的发布，新的Composition API让人眼前一亮，新的编程思想开始绽放，setup()让书写vue代码不再需要像之前一样将同一块逻辑分解成方法、变量了，导致逻辑分散。在vue3当中，你可以畅快的在setup()函数当中书写同一块逻辑。并且vue3对Typescript的支持也提高了很多。对比vue2需要使用各种装饰器来辅助，vue3对Typescript变得更加友好，开发者可以直接在组件内部书写ts代码。相对应的，vue的一些官方库也更新了相对应的api对Composition API的支持。下面让我们一起来构建一个vue3+typescript的项目
项目搭建
项目采用vue-cli来构建，在终端输入下面命令：
vue create hello-world
输入完成之后，你会提示选取一个prest。
你可以选取默认的，只包含babel+eslint，我们需要创建vue3+ts的项目,因此选择Manually select features。
勾选上Typescript，然后按enter键就可以下一步了，下一步之后会到选择vue版本的界面，记住选择vue3之后的一些选项配置根据个人需要可以适当选择。
项目基本目录
新建的项目的目录结构一般如下
node_module用来存放我们从npm上下载下来的插件和包。
public用来存放我们的公共资源，包含index.html和favicon.ico。
src是我们项目的资源文件。
.gitignore存放我们提交git是需要忽略的文件，比如node_modules。
package-lock.json存放我们需要下载的依赖的版本，但并不是准确的版本。
package.json存放我们当前项目所依赖的包和插件的版本，是实际下载的版本，还有项目的入口文件等等。
README.md项目的文档。
tsconfig.jsonts的配置文件。
项目初始化
虽然我们现在创键了一个vue3+TS的项目，但是我们还需要下载ts+loader，ts-loader的作用是来解析.ts/.tsx结尾的文件，如果没有ts-loader我们编写的ts文件将无法被解析。
npm install ts-loader --save-dev
安装完ts-loader之后，我们需要创键一个vue.config.js文件，这里面包含的都是我们项目的配置，详情配置可以查看vue-cli的官网,
在vue.config.js当中，我们需要进行一些简单的配置：
module.exports = {
//配置webpack
configureWebpack: {
resolve: {
extensions: [".ts", ".tsx", ".js", ".vue"],
},
},
};
好了，现在项目已经可以正常的运行了。关于tsconfig.js当中的配置，详细可以参考官方的文档。
