南的个人博客

遇事不决，但问春风

vue3使用element-plus

发表于 更新于 分类于
Vue3+Element-plus

官方网站

几乎所有的问题都能在官网上找到答案，建议多看看官方文档

Element-plus

Vue3

Element-plus的使用

导入Element-plus

使用的是自动按需导入

  1. 导入element-plus的包

    1
    2
    npm install element-plus --save  下载 element-plus
    npm install @element-plus/icons  下载element-plus的图标

  2. 下载插件

    1
    npm install -D unplugin-vue-components unplugin-auto-import

  3. 创建vue.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const AutoImport = require("unplugin-auto-import/webpack");
    const Components = require("unplugin-vue-components/webpack");
    const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

    module.exports = {
        lintOnSave: false,// 关闭语法检查
        configureWebpack: {
            plugins: [
                AutoImport({
                    resolvers: [ElementPlusResolver()],
                }),
                Components({
                    resolvers: [ElementPlusResolver()],
                }),
            ],
        },
    };

配置完成，直接使用emement-plus的组件，不需要注册

设置Element-plus侧边栏高度占满屏幕

1
2
3
4
5
6
7
8
9
10
11
#app,html,body {
    height: 100%;
    margin: 0;
}
.tac{
    height:100%;
}

el-menu{
    heig
}

使用vue3配置路由

vue3和vue2配置路由的方式有所不同，所以特此记录

  1. 下载vue-router

    1
    npm install vue-router

  2. 在index.js中配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import {createRouter, createWebHashHistory} from 'vue-router'
    import page1 from "@/pages/page1";

    const vueRouter =  createRouter({
        //必须配置，vue3中的mode
        history:createWebHashHistory() ,
        routes:[
            {
                name: 'test1',
                path:'/page1',
                component: page1
            }
        ]

    })
    export default vueRouter;

  3. 在main.js中引用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from "@/router";

    const app = createApp(App)

    app.use(router)
    app.mount('#app')
    // createApp(App).mount('#app')

  4. 设置编程式路由跳转

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <script>
    // 由于vue3中setup无法获得this，所以使用useRouter   
    import {useRouter} from 'vue-router'
    export default {
      name: "test",
      setup(){
        const router = useRouter()
        function toPage1() {
          router.push({
              path:'/page1'
          })
        }
        return{
          toPage1,
        }
      }
    }
    </script>