Home>Article>Web Front-end> Global introduction and local introduction of Element-plus into vue (with code)
This article brings you relevant knowledge aboutvue, which mainly introduces the issues related to the global introduction and local introduction methods of vue3 integrated Element-plus. Let’s take a look at it together. I hope everyone has to help.
【Related recommendations:javascript video tutorial,vue.js tutorial】
First download element- plus
npm install element-plus
The way to introduce element-plus is global import, which means that all components and plug-ins will be automatically registered,
Advantages: Quick to get started
Disadvantages: It will increase the size of the package
In the main.ts file
import { createApp } from 'vue' // 全局引入 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' import router from './router' import store from './store' const app = createApp(App) app.use(router) app.use(store) app.use(ElementPlus) app.mount('#app')
Local introduction means that a certain component is used to introduce a certain component during development.
Default Primary Success Info Warning Danger 中文
But in this way, we have to manually introduce the corresponding component into the component every time we use it during development. css style, it will be more troublesome to use
Need to installunplugin-vue-components
andunplugin- auto-import
These two plug-ins
npm install -D unplugin-vue-components unplugin-auto-import
After the installation is completed, configure it in the vue.config.js file
// vue.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 = { outputDir: './build', // 和webpapck属性完全一致,最后会进行合并 configureWebpack: { resolve: { alias: { components: '@/components' } }, //配置webpack自动按需引入element-plus, plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } }
After the configuration is automatically introduced on demand, It can be used directly in the component without reference or registration. It has been automatically moved into the Element-plus component on demand and used directly:
Default Primary Success Info Warning Danger 中文
Effect:
Advantages: Integration is relatively simple
Disadvantages: All components and styles will be packaged, large volume
Usage: npm install element-plus --save
In main.ts, reference the js and css files
Take the About.vue page as an example, just use the relevant components directly in the page. The components have been globally registered by default and do not need to be re-registered in the page
Advantages: The package will be smaller
Disadvantages: Quoting is more troublesome
Usage 1:Use About Take the .vue page as an example, reference the js file in the page, register the component locally, thestyle is still a global reference, the official recommendation is
##【Related recommendations:
javascript video tutorialThe above is the detailed content of Global introduction and local introduction of Element-plus into vue (with code). For more information, please follow other related articles on the PHP Chinese website!