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 按需引入配置完成，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45573.html
標籤：JavaScript
上一篇：高度自適應