Vue.js的nuxt框架引用element-ui

Vue.js的nuxt框架引用element-ui

前言

其实就是为nuxt添加一个插件，使用其他vue插件也是一样的用法

安装

npm install element-ui --save

调用element-ui

首先在nuxt项目下的plugins文件夹下新建一个element-ui.js文件，里面写：

import Vue from 'vue'

import Element from 'element-ui'

Vue.use(Element);

然后在nuxt根目录下找到nuxt.config.js文件，里面加上这些代码：

/*调用element-ui自带的css样式*/
css:[
    {src:'element-ui/lib/theme-chalk/index.css'}
  ],

/*调用element-ui插件，ssr是服务器渲染*/
  plugins: [
    {
      src:'~plugins/element-ui',
      ssr: false}
    ],

  /*
  ** Build configuration
  */
  build: {
    /*此处要加vendor*/
    vendor: ['element-ui'],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },

  },

至此，我们就可以 偷懒 愉快地使用element-ui了

END

当然，Vue本身支持less sass stuly这些css预处理语言，等我没那么忙我就去看一下，现在先偷一下懒吧