elementui plus安装步骤

安装 Element Plus#

$ npm install element-plus --save

 

1、按需导入#

您需要使用额外的插件来导入要使用的组件。

2、自动导入推荐#

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

 

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

3、Vite#

// vite.config.ts

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
  resolve:{
    alias: {
      '@': pathSrc,
      'comps': path.resolve(__dirname, 'src/components'),
      'pages': path.resolve(__dirname, 'src/pages'),
      'styles': path.resolve(__dirname, 'src/styles'),
      'router': path.resolve(__dirname, 'src/router'),
      'store': path.resolve(__dirname, 'src/store'),
      'api': path.resolve(__dirname, 'src/api'),
      'assets': path.resolve(__dirname, 'src/assets'),
      "views": path.resolve(__dirname, 'src/views'),
      'utils': path.resolve(__dirname, 'src/utils'),
      'hooks': path.resolve(__dirname, 'src/hooks')
    },
  },
  // ...
  plugins: [
    Vue(),
    // ...
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],




      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),




        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],




      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),




    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],




      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),




    Icons({
      autoInstall: true,
    }),
  ],
  server: {
    port: 3000,
    host: '0.0.0.0',
    open: true,
    cors: true,
    proxy: {
      "^/api": {
        target: 'http://www.aaa.com',
        changeOrigin: true
      },
      "^/java": {
        target: "http://www.aaa.com",
        changeOrigin: true
      },
      "^/special_server/java": {
        target: "http://www.aaa.com",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/special_server/, '')
      },
    }
  }
})

3、直接在页面中就可以使用了

3、需要注意的是关于icon 不能直接使用

//这样才可以显示图标 ep对应的是config里设置的
<i-ep-Bicycle />
//还可以用 i 标签加上class的方式

 

​