vue3项目的基本配置

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 )