首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在 Nuxt.js 中使用 iView 的配置

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

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

进入 template 后,完成安装和启动:

代码语言:javascript
复制
cd template
npm i
npm run dev

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

具体配置

来看一下具体配置。

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

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

代码语言:javascript
复制
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,写入以下内容:

代码语言:javascript
复制
import Vue from 'vue';
import iView from 'iview';

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

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

扫码关注腾讯云开发者

领取腾讯云代金券