非常教程

iView UI参考手册

组件

在 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 组件,都会通过服务端来渲染。

iView UI

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品

iView UI目录

1.指南
2.组件
3.组件基础
4.组件布局