如何在nuxt.js中使用element-ui?

Question

提问的时候，element-ui 版本是1.0

浏览了下vue文档的ssr部分，了解到nuxt.js

看了下nuxt.js 官方仓库的readme. 然后发现nuxt是将vue和打包工具整合起来，做了一些变形。使用起来，是在vue的上一层逻辑：比如，一些文件夹的名称和渲染规则已经约定好。

我的问题来了，如何在nuxt中使用 element-ui?

我已尝试：

1. nuxt.js : Global-CSS

nuxt.config.js

module.exports = {
  css: [
    'element-ui/lib/theme-default/index.css',  // 'hover.css/css/hover-min.css',
    { src: 'element-ui', lang: 'css'},  // { src: 'bulma', lang: 'sass' },
    join(__dirname, 'css/main.css')
  ]
}

没有效果

2-1. nuxt.js : Plugins

nuxt.config.js

plugins: [
    '~plugins/element-ui.js'  \\ '~plugins/vue-notifications.js'
  ],

element-ui.js

import Vue from 'vue'
import ElementUI  from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.component(Button.name, Button)

报错: window not found

2-2. nuxt.js : Plugins

nuxt.config.js

build: {
    vendor: [
      'axios', 
      // join(__dirname, './plugins/element-ui.js')
    ]
  },

没有效果

请问，该怎么办？

Answer 1

最近正在弄ssr，正好用到elementUI，官方推荐的用法是可以的，而且可以实现按需引用，下面是我的配置，送给需要的人，也算是一个总结：

nuxt.config.js

vender:[
  'element-ui'
],
babel:{
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    },
    'transform-async-to-generator',
    'transform-runtime'
  ]]],
  comments: true
},
plugins: [
{ src: '~plugins/element-ui', ssr: true }
],
css: [
// 全部引用的时候需要用到
// 'element-ui/lib/theme-default/index.css'
]

～plugins/element-ui.js

import Vue from 'vue'

// 全部引用，此时需要在nuxt.config.js中设置css
// if (process.BROWSER_BUILD) {
//   Vue.use(require('element-ui'))
// }

// 按需引用
import { Button } from 'element-ui'
Vue.component(Button.name, Button)

Answer 2

你好 请问我用nuxt集成element ui的时候报这个错误

TypeError: arguments[i].apply is not a function
    at Compiler.apply (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/tapable/lib/Tapable.js:306:16)
    at webpack (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/webpack/lib/webpack.js:32:19)
    at /Users/cometlj/WebstormProjects/nuxtproject/node_modules/nuxt/dist/nuxt.js:1166:73
    at Promise (<anonymous>)
    at F (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/core-js/library/modules/_export.js:35:28)
    at Nuxt.webpackRunClient (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/nuxt/dist/nuxt.js:1164:10)
    at Nuxt._callee2$ (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/nuxt/dist/nuxt.js:519:37)
    at tryCatch (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/regenerator-runtime/runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/cometlj/WebstormProjects/nuxtproject/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
    at Promise (<anonymous>)
    at F (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/core-js/library/modules/_export.js:35:28)
    at Nuxt.<anonymous> (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12)
    at Nuxt.buildFiles (/Users/cometlj/WebstormProjects/nuxtproject/node_modules/nuxt/dist/nuxt.js:537:18)

请问这个问题如何解决？
PS:
package.json中

    "element-ui": "1.3.6",
    "nuxt": "latest"

Answer 3

https://glitch.com/edit/#!/nu...:3:2 我用element-ui2.0 按照这个链接操作可以用了

Answer 4

Element 1.1.0 版本预览

1.1.0 版本将支持 SSR，届时推荐使用 nuxt 体验。

Answer 5

我在element-ui放到cdn遇到一些问题https://segmentfault.com/a/11...，如果有好的方案可以给我留言

Answer 6

和element的官方文档上的引用方式不同，nuxt可以在nuxt.config.js 中添加配置
`

css: [
    'element-ui/lib/theme-default/index.css'
    ],

`