nuxt 按需引入 elementUI 配置

一顆乖乖樹發表於2019-02-16
UXUI

plugins/element-ui.js

import Vue from `vue`
import { Pagination } from `element-ui`

Vue.use(Pagination)

nuxt.config.js

plugins: [
    { src: `@/plugins/element-ui`, ssr: true }
],

build: {
    vendor: [
        `element-ui`
    ],
    babel: {
      `plugins`: [
        [
          `component`,
          {
            `libraryName`: `element-ui`,
            `styleLibraryName`: `theme-chalk`
          }
        ]
      ],
      `comments`: true
    },
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: `pre`,
          test: /.(js|vue)$/,
          loader: `eslint-loader`,
          exclude: /(node_modules)/
        })
      }
   }
}

使用

<el-pagination
  :total="1000"
  background
  layout="prev, pager, next"
  @current-change="change"
/>

相關文章