H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

提问的时候,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')
    ]
  },

没有效果

请问,该怎么办?

回答:

最近正在弄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)

回答:

你好 请问我用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"

回答:

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

回答:

Element 1.1.0 版本预览

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

回答:

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

本文地址:H5W3 » 如何在nuxt.js中使用element-ui?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址