准备工作
首先请确保你的node.js版本>=12.0.0
因为vite的兼容性，Vite 需要Node.js版本 >= 12.0.0。
如果你不知道你的node.js的版本是多少，请按照如下步骤
window+r
输入cmd，然后回车
然后输入node -v,就可以查看node.js版本啦
开始搭建
npm init vite@latest
如果出现下面的情况，是因为权限不够，你需要切换到管理员下运行
右键电脑左下角的windows，找到命令提示符（管理员）
cd切换到你需要搭建项目的目录，然后重新输入
npm init vite@latest
输入自己的项目名称
选择你熟悉的框架，回车，这里我选择的是vue
使用上下箭头，选择vue+ts，回车
然后方框里面的步骤执行
最后执行npm run dev，你就会得到这个页面啦啦啦啦啦啦
你以为这样就可以了？？？
不！不！不！
实际去开始项目，你还需要下载引入项目需要的vue-router，vuex，axios，element-plus等等依赖，这些根据自己项目的需求去搭建就好啦。
当然这里我就拿element-plus单独出来讲讲........是骡子是马，拉出来遛遛。。。。
1.下载element-plus
# 选择一个你喜欢的包管理器# NPM$ npm install element-plus --save# Yarn$ yarn add element-plus
2.完整引入。在main.ts文件引入
// main.tsimport { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)app.mount('#app')
根据官网的说法如果您使用 Volar，请在tsconfig.json中通过compilerOptions.type指定全局组件类型。
补充知识：vue3在vscode使用的插件是volar（vue2的是vetur），为什么呢？？
解答：因为写过vue2的人都知道，vue的template里，只能有一个根标签，使用多标签，vetur插件就会提示你有错误，但是vue3之后，去掉了这个限制，template标签里是允许有多个标签的，这是vue3.0的新功能，所以我们需要使用适合vue3的volar插件
// tsconfig.json{"compilerOptions": {// ..."types": ["element-plus/global"]}}
------------------------------------转折 -----------------------------------
就不对称，逼死强迫症！！！
完整引入一般是不推荐的，因为包面积太大了，对于性能不友好！！！！
一般推荐使用按需引入！！
2.按需引入，顾名思义，就是把你需要的组件一个个导入。当然官网很友好，推出了自动导入的。
首先你需要安装unplugin-vue-components和unplugin-auto-import这两款插件
#选择一个你喜欢的包管理器#NPM# npm install -D unplugin-vue-components unplugin-auto-import#Yarn$ yarn add -D unplugin-vue-components unplugin-auto-import
接着找到vite.configf.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()],}),],}
直接在页面使用就好
效果如下
想更多的了解element-plus引入，欢迎去官网看文档设计 | Element Plus
需要特别注意的是：element-plus中icon的引入！！！！
如果你按照文档上面的做法，老老实实的去安装
# 选择一个你喜欢的包管理器# NPM$ npm install @element-plus/icons-vue# Yarn$ yarn add @element-plus/icons-vue
然后直接使用
然后你就会得到。。一片空白 ？？？我的图标呢？？
正确的使用方法是，你还需要去引入一下图标
如果你走到这里，那么恭喜你，哈哈哈项目已经搭建好啦，可以开开心心的去开发啦！！
完结啦！！！小编就陪你到这了，剩下的路自己去走吧！
著作不易，喜欢的留下你的小脚丫。。
有不解的，请留言评论。。
