开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

命令行运行 安装 element-plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

自动导入，需要安装两个插件，这也是官方推荐的使用方法

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

vite中的用法 在vite.config.js中使用以下插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
    AutoImport({
        resolvers:[ElementPlusResolver()]
      }),
    Components({
      resolvers:[ElementPlusResolver()]
    })
  ],
  server:{  //解决本地网路IP访问问题
    host:"0.0.0.0",
    // port:"8080"  //设置端口号 可以不设置
  },
  resolve:{
  alias:{ //配置别名
      "@":'/src'
    }
  }
})

Webpack 中使用

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

到这一步我们的element-plus 就引用成功了，在页面中直接使用就可以了

这里我们可以看一下效果

<el-button type="primary">1111</el-button>
<el-tag class="ml-2" type="success">Tag 2</el-tag>

这里使用el-menu组件和vue-router实现菜单栏以及页面的跳转。

el-menu组件设置了router属性后就可以使用vue-router实现跳转了

<template>
  <el-menu
    router
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="'/home/' + /">首页</el-menu-item>
    <el-menu-item index="'/home/' + /page1">页面1</el-menu-item>
    <el-menu-item index="'/home/' + /page2">页面2</el-menu-item>
    <el-menu-item index="'/home/' + /page3">页面3</el-menu-item>
  </el-menu>
  <router-view />
</template>

使用的路由需在router中注册

//定义路由数组
const  routes =[
    { //基本格式
        path:"/",
        name:"home",
        component:()=>import("@/views/home/index.vue"), //组件对象
        meta:{
            title:"首页"
        },
        children:[]
    },
    { //
        path:"/home1",
        name:"home1",
        component:()=>import("@/views/home/index1.vue"), //组件对象
        meta:{
            title:"1"
        },
        children:[]
    },
    { //
        path:"/home2",
        name:"home2",
        component:()=>import("@/views/home/index2.vue"), //组件对象
        meta:{
            title:"2"
        },
        children:[]
    },
    {
        path:"/home3",
        name:"home3",
        component:()=>import("@/views/home/index3.vue"), //组件对象
        meta:{
            title:"3"
        },
        children:[]
    }
]

这样就可以切换页面了