随着vue3.0的越来越受欢迎，开始有许多公司和个人开始学习并使用vue3开发项目。我从接触学习并使用vue2，到现在的vue3，一直是vue的忠实粉丝和追随者。vue3也发布很长时间了，目前vue3+vite+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，成为了较为流行的前端技术之一。那么今天就带大家一起来搭建一个Vue3的项目吧！

一、使用vite构建vue3.0+ts项目（推荐使用yarn）

安装yarn：首先下载node.js，使用npm安装命令如下： npm install -g yarn 查看yarn是否安装成功：yarn --version，回车，出现版本号即安装成功

1.初始化项目

yarn create @vitejs/app

回车

输入项目名称，如project-app，回车，出现选择一个框架，我们选择vue，按一下向下的箭头，return回车即可选中vue作为我们的框架。

接下来是Select a variant，选择一个变体，我们直接选择第二个vue-ts，回车，会给我们自动安装typescript，就不需要再安装typescript了，很方便。

此时，在桌面就可以看到生成的项目了。

看看我们的项目目录吧

这就是一个vue3+vite+ts最原始的项目了。

然后，cd我们的刚生成的project-app项目，输入yarn dev命令，就可以直接启动了。

你发现了吗，vite秒启动项目，是不是比webpack快速多了。

2.安装Element plus

yarn add element-plus

推荐按需引入的方式：

按需引入需要安装unplugin-vue-components和unplugin-auto-import两个插件。

yarn add -D unplugin-vue-components unplugin-auto-import

再将vite.config.ts写入一下配置，即可在项目中使用element plus组件，无需再引入。

// vite.config.ts import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'  export default {   plugins: [     // ...     AutoImport({       resolvers: [ElementPlusResolver()],     }),     Components({       resolvers: [ElementPlusResolver()],     }),   ], }

3.配置scss全局样式

yarn add --save-dev sass-loader yarn add --save-dev node-sass yarn add --save-dev sass

在vite.config.ts中写入以下配置。