在 Nuxt.js 中使用 iView 的配置

iView 是支持服务端渲染的（即 SSR），而使用 Nuxt 可以方便集成服务端渲染的各种配置。本文则介绍在 Nuxt.js 中使用 iView 3.0 的配置。

可以先点击下面的链接下载完整的配置文件，已经集成好了所有的配置： http://file.iviewui.com/iview-ssr.zip

进入 template 后，完成安装和启动：

cd template
npm i
npm run dev

启动后，访问 http://127.0.0.1:3000/ 就可以打开了。

具体配置

来看一下具体配置。

在 Nuxt.js 中使用 iView，就是把 iView 当做一个插件来使用的。

首先在 nuxt.config.js 中配置 iView，重点是 plugins 的配置：

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: '{{ name }}',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '{{escape description }}' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  plugins: [
      {src: '~plugins/iview', ssr: true}
  ],
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** 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)/
        })
      }
    }
  }
}

然后在目录 plugins 中创建文件 iview.js，写入以下内容：

import Vue from 'vue';
import iView from 'iview';

Vue.use(iView
import 'iview/dist/styles/iview.css';

这样就配置就完成了，所有的 iView 组件，都会通过服务端来渲染。