Nuxt配置Element-UI按需引入的操作方法
Nuxt使用create-nuxt-app创建项目时，选择使用Element-UI为默认组件库，发现Nuxt没有开启Element-UI的按需引入配置，需要自行配置。
安装依赖
在create-nuxt-app中没有选择Element-UI的先安装。
npminstallelement-ui--save
或者
yarnaddelement-ui
Element-UI开启按需引入，必须安装babel-plugin-component插件。
npminstallbabel-plugin-component--save-dev
或者
yarnaddbabel-plugin-component
安装完成后，在文件根目录创建(或已经存在)plugins/目录下创建相应的插件文件，创建名为：element-ui.js的文件。
//element-ui.js
importVuefrom'vue'
import{
Container,
Header,
Aside,
Main,
Menu,
MenuItem,
Button,
Form,
FormItem,
Input
}from'element-ui'
importlocalefrom'element-ui/lib/locale/lang/en'
constcomponents=[
Container,
Header,
Aside,
Main,
Menu,
MenuItem,
Button,
Form,
FormItem,
Input
];
constElement={
install(Vue){
components.forEach(component=>{
Vue.component(component.name,component)
})
}
}
Vue.use(Element,{locale})
配置plugins选项
在nuxt.config.js文件中，配置plugins选项。
module.exports={
/*
**PluginstoloadbeforemountingtheApp
**https://nuxtjs.org/guide/plugins
*/
plugins:["@/plugins/element-ui"],
}
Nuxt默认为开启SSR，采用服务端渲染，也可以手动配置关闭SSR，配置为：
module.exports={
/*
**PluginstoloadbeforemountingtheApp
**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={
/*
**GlobalCSS
*/
css:['element-ui/lib/theme-chalk/index.css'],
}
删除'element-ui/lib/theme-chalk/index.css'作为全局样式的打包配置，改为
module.exports={
/*
**GlobalCSS
*/
css:[],
}
配置babel选项
在nuxt.config.js文件中，在选项build中配置babel选项：
module.exports={
/*
**Buildconfiguration
**Seehttps://nuxtjs.org/api/configuration-build/
*/
build:{
babel:{
"plugins":[
[
"component",
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]
]
}
}
}
到此，Element-UI按需引入配置完成。
总结
到此这篇关于Nuxt配置Element-UI按需引入方法的文章就介绍到这了,更多相关Nuxt按需引入Element-UI内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！