1.工具使用：vite创建项目，ElementPlus框架
2.ElementPlus使用按需引入(自动导入)
（1）安装element-plus
npm install element-plus --save
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
（2）在vite.config.js文件中进行配置
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
3.路由配置
（1）安装vue-router ：npm install vue-router
（2）创建router文件夹，并在该文件夹下创建index.js文件
在views文件夹下创建所需的页面home/Home.vue Main.vue
import {createRouter,createWebHistory} from 'vue-router'
const routes = [
{
path:'/',
component: ()=> import('../views/Main.vue'),
children:[
{
path:'/',
name:'home',
component:() => import('../views/home/Home.vue')
}
]
}
]
const router = createRouter({
history:createWebHistory(),
routes
})
export default router
（3）在main.js文件中引入
import router from './router'
app.use(router)
（4）在App.vue中出口
<router-view></router-view>
4.vuex的使用
(1)安装vuex：npm i vuex -S
(2)创建store文件夹，并在该文件夹下创建index.js文件
import { createStore } from 'vuex'
export default createStore({
state:{
isCollapse:true
},
mutations:{
isCollapse(state,payload){
state.isCollapse = !state.isCollapse
}
}
})
（3）在main.js文件中引入
import store from './store/index.js'
app.use(store )