Vue nuxt.js 中引入Element UI

黄良钵

分类: 程序开发 285 0

在已经安装好 nuxt.js 中,先npm安装Element UI :

  1. npm i element-ui -S

再安装Element UI按需加载的一个依赖(全局引入不需要安装此插件):

  1. npm install babel-plugin-component -D

然后配置nuxt.config.js文件:

  1. vender:[
  2.   'element-ui'
  3. ],
  4. // 全局引入不需要babel这个对象
  5. babel:{
  6.   "plugins": [["component", [
  7.     {
  8.       "libraryName""element-ui",
  9.       "styleLibraryName""theme-default"
  10.     },
  11.     'transform-async-to-generator',
  12.     'transform-runtime'
  13.   ]]],
  14.   comments: true
  15. },
  16. plugins: [
  17. { src: '~plugins/element-ui', ssr: true }
  18. ],
  19. css: [
  20. 'element-ui/lib/theme-chalk/index.css'
  21. ]

然后在plugins文件夹中创建  element-ui.js 文件,内容为:

  1. import Vue from 'vue'
  2. // 按需引用
  3. import { Button } from 'element-ui'
  4. Vue.component(Button.name, Button)
  5. // 全局引入为
  6. import ElementUI from 'element-ui'
  7. Vue.use(ElementUI)

完!

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Element、nuxt、Vue

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “Vue nuxt.js 中引入Element UI”

Loading...