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按需引入方法的文章就介绍到这了,更多相关Nuxt 按需引入Element-UI内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js中hash和ico的关联分析,以实例形式分析了location.hash与ico的加载顺序关系,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家介绍了JavaScript设计模式中的状态模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
这篇文章主要介绍了JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析,包括懒加载和onbeforeunload等要点的理解,需要的朋友可以参考下2016-05-05
关于javaScript注册click事件传递参数的不成功问题
在javaScript中给一个html元素注册click事件处理函数时，比如给该处理函数传3个参数。可是不管是使用下面那种方式都不能给事件处理函数传递参数2014-07-07
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
这篇文章主要介绍了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data,结合实例形式分析了wx.getUserInfo与open-data获取用户信息的相关操作技巧与使用注意事项,需要的朋友可以参考下2019-05-05
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
客户端是UTF-8编码，这也是现在大家公认的标准编码在这种情况下，实用AJAX异步获取GB2312编码的服务器端信息时，不可避免的要遇到汉字乱码问题2010-11-11
这篇文章主要为大家介绍了Varlet组件实现一个丝滑的点击水波效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在JavaScript编程中,经常会遇到需要计算字符串中特定字符出现次数的情况,在本文中,我将分享两个简单的JavaScript函数,用于计算字符串中特定字符出现的次数,需要的朋友可以参考下2023-11-11
上一篇文章，我们讲解了图像处理中的阈值函数,这一篇文章我们来做膨胀和腐蚀函数2013-01-01
这篇文章主要介绍了原生JS实现的多个彩色小球跟随鼠标移动动画效果,涉及javascript事件响应、页面元素属性动态修改及随机数应用等相关操作技巧,需要的朋友可以参考下2018-02-02
最新评论