赞
踩
Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库:
npm install element-plus
一种引入element-plus的方式是全局引入,代表的含义是所有的组件和插件都会被自动注册:
//main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')
也就是在开发中用到某个组件对某个组件进行引入:
<template> <div id="app"> <el-row class="mb-4"> <el-button disabled>Default</el-button> <el-button type="primary" disabled>Primary</el-button> <el-button type="success" disabled>Success</el-button> <el-button type="info" disabled>Info</el-button> <el-button type="warning" disabled>Warning</el-button> <el-button type="danger" disabled>Danger</el-button> </el-row> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { ElButton } from 'element-plus' export default defineComponent({ name: 'App', components: { ElButton } }) </script> <style lang="less"> </style>
但是我们会发现是没有对应的样式的,引入样式有两种方式:
import 'element-plus/dist/index.css'
1.安装插件:
npm install unplugin-element-plus -D
2.配置vue.config.js
const ElementPlus= require('unplugin-element-plus/webpack');
module.exports = {
configureWebpack: {
resolve: {
alias: {
components: '@/components'
}
},
//配置webpack自动按需引入element-plus样式,
plugins: [ElementPlus()]
}
};
但是这里依然有个弊端:
import { ElButton, ElTable, ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge, } from 'element-plus' const app = createApp(App) const components = [ ElButton, ElTable, ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge ] for (const cpn of components) { app.component(cpn.name, cpn) }
自动导入组件以及样式[推荐】
npm install -D unplugin-vue-components unplugin-auto-import
const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); const { ElementPlusResolver } = require('unplugin-vue-components/resolvers'); module.exports = { configureWebpack: { resolve: { alias: { components: '@/components' } }, //配置webpack自动按需引入element-plus, plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } };
<template> <div id="app"> <el-row class="mb-4"> <el-button disabled>Default</el-button> <el-button type="primary" disabled>Primary</el-button> <el-button type="success" disabled>Success</el-button> <el-button type="info" disabled>Info</el-button> <el-button type="warning" disabled>Warning</el-button> <el-button type="danger" disabled>Danger</el-button> </el-row> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ }) </script> <style lang="less"> </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。