Nuxt中按需引入element-UI

完整组件列表和引入方式（完整组件列表以 components.json 为准）

一、安装

npm i element-ui -S

二、在plugins下新建elementUI.js文件

elementUI.js

按需引入：

import Vue from 'vue'

import { Pagination, Alert, Card, Message } from 'element-ui' //引入分页组件

Vue.use(Pagination);
Vue.use(Alert);
Vue.use(Card);

Vue.prototype.$message = Message;

三、在根目录下的nuxt.config.js文件中（引入全局css和刚刚封装的element组件）

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: "好一只帅卤蛋",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],

  },
  /*
  ** Customize the progress-bar color
  */
  loading: {
    color: "#1E90FF",
    height: "3px"
  },
  // loading: './components/loading.vue',
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [{
    src: '~plugins/ElementUI',
    ssr: true,
  }
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    },
    vendor: ['element-ui']
  }
}