Vue nuxt.js 中引入Element UI

BG7ZAG

分类： 程序开发 2160 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'
  3. // 按需引用
  4. import { Button } from 'element-ui'
  5. Vue.component(Button.name, Button)
  7. // 全局引入为
  8. import ElementUI from 'element-ui'
  9. Vue.use(ElementUI)

完！

版权声明: 本站文章除特别声明外，均为本站原创。转载请注明出处，谢谢。

本文地址: https://blog.bg7zag.com/1562

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

作者简介： BG7ZAG

打赏

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

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

Loading...