ホームページ >ウェブフロントエンド >Vue.js >vue への Element-plus のグローバル導入とローカル導入 (コード付き)
この記事では、vue に関する関連知識を提供し、vue3 統合型 Element-plus のグローバル導入とローカル導入方法に関する問題点を中心に紹介しますので、一緒に見ていきましょう。助けなければなりません。
【関連する推奨事項: javascript ビデオ チュートリアル 、vue.js チュートリアル ]
最初のダウンロード要素- plus
npm install element-plus
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')2。方法は、部分的な導入を使用することですローカル導入とは、開発中に特定のコンポーネントを導入するために特定のコンポーネントが使用されることを意味します。
<template> <div> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> <el-button>中文</el-button> </div> </template> <script> import { defineComponent } from 'vue' // 局部引入 import { ElButton } from 'element-plus' import 'element-plus/theme-chalk/el-button.css' import 'element-plus/theme-chalk/base.css' export default defineComponent({ components: { ElButton }, setup() { return {} } }) </script> <style></style>ただし、この方法では、対応するコンポーネントを手動で導入する必要があります。開発時に使用するたびにコンポーネントを追加します。css スタイルを使用すると面倒になります。3. オンデマンドで要素プラスを自動的に導入します。推奨事項
unplugin のインストールが必要です。 -vue-components と
unplugin-auto-importこれら 2 つのプラグイン
npm install -D unplugin-vue-components unplugin-auto-importインストールが完了したら、vue.config.js ファイルで構成します
// 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()] }) ] } }
構成はオンデマンドで自動的に導入された後、参照や登録なしでコンポーネント内で直接使用できます。オンデマンドで Element-plus コンポーネントに自動的に移動され、直接使用されます:
<template> <div> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> <el-button>中文</el-button> </div> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ setup() { return {} } }) </script> <style></style>効果:
拡張機能:
利点: 統合は比較的簡単です
欠点: すべてのコンポーネントとスタイルがパッケージ化され、大容量になります
使用法: npm install element-plus --save
main.ts で、 js および css ファイルを参照してください
About.vue ページを例として、関連するコンポーネントをページ内で直接使用してください。コンポーネントはグローバルに登録されています。デフォルトで設定されており、ページで再登録する必要はありません
デメリット: 引用が面倒
使い方 1:
About を使用する .vue ページを例として、ページ内の js ファイルを参照し、コンポーネントをローカルで使用する場合、スタイルは依然としてグローバル参照であり、公式の推奨事項は
#[関連する推奨事項:javascript ビデオ チュートリアル 、
vue.js チュートリアル以上がvue への Element-plus のグローバル導入とローカル導入 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。