這篇文章主要介紹Nuxt如何配置Element-UI按需引入，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
Nuxt 使用 create-nuxt-app 創建項目時，選擇使用 Element-UI 為默認組件庫，發現 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
安裝完成后，在文件根目錄創建(或已經存在) plugins/ 目錄下創建相應的插件文件，創建名為：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 })配置 plugins 選項
在 nuxt.config.js 文件中，配置 plugins 選項。
module.exports = {
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: ["@/plugins/element-ui"],
}Nuxt 默認為開啟 SSR，采用服務端渲染，也可以手動配置關閉 SSR，配置為：
module.exports = {
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
{
src: "@/plugins/element-ui",
ssr: false // 關閉ssr
}
],
}如果在 create-nuxt-app 中默認選了 Element-UI 的，還需要將 Element-UI 的全局樣式去掉，即在 nuxt.config.js 中：
module.exports = {
/*
** Global CSS
*/
css: ['element-ui/lib/theme-chalk/index.css'],
}刪除 'element-ui/lib/theme-chalk/index.css' 作為全局樣式的打包配置，改為
module.exports = {
/*
** Global CSS
*/
css: [],
}配置 babel 選項
在 nuxt.config.js 文件中，在選項 build 中配置 babel 選項：
module.exports = {
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
babel: {
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
}
}到此，Element-UI 按需引入配置完成。
以上是Nuxt如何配置Element-UI按需引入的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
