js►Vue

Nuxt element-ui

Nuxt 引入js插件 以element-ui 为例

nuxt.config.js

可以通过nuxt.config.js 覆盖Nuxt默认配置

坑点：theme-chalk。google搜了一下，theme-default（看了下帖子时间2016年？）。其实主要还是去/node_modules/element-ui/lib/… 下自己看下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// nuxt.config.js

// 生成的 vendor.bundle.js 文件中新模块，以减少应用 bundle 的体积
vender:[
   'element-ui'
],

//  配置使用 Vue.js 插件。
plugins: [
  { src: '~plugins/element-ui', ssr: true }
],
css: [
  // element样式全局引用
  'element-ui/lib/theme-chalk/index.css'
]

element-ui 搭配插件按需引入组件主题

1
2
3
4
5
6
7
8
9
10
11
12
13
// nuxt.config.js

babel:{
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    },
    'transform-async-to-generator',
    'transform-runtime'
  ]]],
  comments: true
}

plugins

Nuxt 插件目录 (plugins)

新建element-ui.js文件

1
2
3
4
5
// plugins/element-ui.js

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)