vue3使用element-plus

vue3使用element-plus

element-ui 是配合 Vue2 使用,element-plus 是配置 vue3 使用的

1. 安装

1. 包管理器的方式

如果是使用 webpack 或者 vite 打包工具新建的项目

javascript"># NPM
npm install element-plus --save

# Yarn
yarn add element-plus

2. 浏览器直接导入

直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus

<head>
  <!-- 导入样式 -->
  <link rel="stylesheet" href="//unpkg.***/element-plus/dist/index.css" />
  <!-- 导入 Vue 3 -->
  <script src="//unpkg.***/vue@3"></script>
  <!-- 导入组件库 -->
  <script src="//unpkg.***/element-plus"></script>
</head>

2. 导入使用

1. 导入全部组件且注册所有的图标

// 导入 element-plus
import ElementPlus from "element-plus";
// 导入 element-plus 样式
import "element-plus/dist/index.css";
// 导入 element-plus 图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 注册所有图标
for (const [key, ***ponent] of Object.entries(ElementPlusIconsVue)) {
  app.***ponent(key, ***ponent);
}

声明使用 ElementPlus 全局变量

// 使用router\vuex\element-plus并挂载
app.use(ElementPlus).use(router).use(store).mount("#app");

项目完整的 main.js 文件

// 导入 vue 和 createApp 方法
import App from "./App.vue";
import { createApp } from "vue";
// 导入路由表
import router from "../router/index";
// 导入 vuex
import store from "../store/index";
// 导入 element-plus
import ElementPlus from "element-plus";
// 导入 element-plus 样式
import "element-plus/dist/index.css";
// 导入 element-plus 图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 导入全局样式
import "@/styles/index.scss";
// 创建 vue 实例
const app = createApp(App);
// 使用router\vuex\element-plus并挂载
app.use(ElementPlus).use(router).use(store).mount("#app");
// 注册所有图标
for (const [key, ***ponent] of Object.entries(ElementPlusIconsVue)) {
  app.***ponent(key, ***ponent);
}

2. 按需导入

完成这个功能需要插件的支持,想了解更多插件的知识 ->webpack_插件plugin_游小北的博客-CSDN博客或者webpack打包工具 & 搭建vue项目_游小北的博客-CSDN博客

1. 安装插件

npm install -D unplugin-vue-***ponents unplugin-auto-import

2. 在 webpack.config.js 里添加如下配置

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

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

如果使用的是 vite 

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import ***ponents from 'unplugin-vue-***ponents/vite'
import { ElementPlusResolver } from 'unplugin-vue-***ponents/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    ***ponents({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. elemetn-plus 图标的使用

安装

1. 包管理器方式

# NPM
npm install @element-plus/icons-vue
# Yarn
yarn add @element-plus/icons-vue
# pnpm
pnpm install @element-plus/icons-vue

2. 标签导入

通过浏览器的 HTML 标签导入,使用全局变量 ElementPlusIconsVue

<script src="//unpkg.***/@element-plus/icons-vue"></script> //unpkg
<script src="//cdn.jsdelivr.***/npm/@element-plus/icons-vue"></script> //jsDelivr

3. 使用方式

以标签的形式直接使用

<el-icon><Plus /></el-icon>
<el-icon><Minus /></el-icon>
<el-icon><CirclePlus /></el-icon>
<el-icon><Search /></el-icon>

转载请说明出处内容投诉
CSS教程_站长资源网 » vue3使用element-plus

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买