Nuxt如何配置Element-UI按需引入-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴！

這篇文章主要介紹Nuxt如何配置Element-UI按需引入，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

Nuxt 使用 create-nuxt-app 創(chuàng)建項目時，選擇使用 Element-UI 為默認組件庫，發(fā)現(xiàn) Nuxt 沒有開啟 Element-UI 的按需引入配置，需要自行配置。

安裝依賴

在 create-nuxt-app 中沒有選擇 Element-UI 的先安裝。

npm install element-ui --save

或者

yarn add element-ui

Element-UI 開啟按需引入，必須安裝 babel-plugin-component 插件。

npm install babel-plugin-component --save-dev

或者

yarn add babel-plugin-component

安裝完成后，在文件根目錄創(chuàng)建(或已經(jīng)存在) plugins/ 目錄下創(chuàng)建相應(yīng)的插件文件，創(chuàng)建名為：element-ui.js 的文件。

// element-ui.js
import Vue from 'vue'
import {
 Container,
 Header,
 Aside,
 Main,
 Menu,
 MenuItem,
 Button,
 Form,
 FormItem,
 Input
} from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

const components = [
 Container,
 Header,
 Aside,
 Main,
 Menu,
 MenuItem,
 Button,
 Form,
 FormItem,
 Input
];

const Element = {
 install (Vue) {
 components.forEach(component => {
  Vue.component(component.name, component)
 })
 }
}

Vue.use(Element, { locale })

分享名稱：Nuxt如何配置Element-UI按需引入-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://bm7419.com/article14/ijoge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、域名注冊、微信公眾號、定制網(wǎng)站、定制開發(fā)、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容