Nuxt如何配置Element-UI按需引入-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!

创新互联公司是网站建设技术企业,为成都企业提供专业的成都网站设计、成都网站建设,网站设计,网站制作,网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制适合企业的网站。十余年品质,值得信赖!

这篇文章主要介绍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 })

新闻标题:Nuxt如何配置Element-UI按需引入-创新互联
网址分享:http://myzitong.com/article/ijoge.html