随着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中写入以下配置。