在 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 组件，都会通过服务端来渲染。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
