美文网首页NUXTJS
Nuxt iView(view-design) 按需加载

Nuxt iView(view-design) 按需加载

作者: 恍若如梦hzpeng | 来源:发表于2020-02-25 10:03 被阅读0次

本文说的主要是按需加载,全部加载的方式和使用就不说了,其实按需加载只需要更改相关配置就可以了。

1、首先更改plugins文件夹中的内容

全部导入时的代码:

import Vue from 'vue';
import iView from 'view-design';
import './theme.less';  // 自定义主题 没有可以忽略

Vue.use(iView);

按需加载的代码:

import Vue from 'vue';
import './theme.less';  // 自定义主题 没有可以忽略

// 导入基础模块 如:分页、表单等等,根据自己使用到的来
import {
    Page,
    Spin,
    Badge,
    Button,
    Card,
    Divider,
    Tabs,
    TabPane,
    Breadcrumb,
    BreadcrumbItem,
    Steps,
    Input,
    Radio,
    Checkbox,
    Table,
    Select,
    Option,
    DatePicker,
    Transfer,
    Upload,
    Form,
    FormItem,
    Message,
    Modal,
    Tooltip,
    Carousel,
    CarouselItem,
    Switch
} from 'view-design'  // 我用的是iView4版本的名字改为了view-design

const components = {
    Page,
    Spin,
    Badge,
    Button,
    Card,
    Divider,
    Tabs,
    TabPane,
    Breadcrumb,
    BreadcrumbItem,
    Steps,
    Input,
    Radio,
    Checkbox,
    Table,
    Select,
    Option,
    DatePicker,
    Transfer,
    Upload,
    Form,
    FormItem,
    Message,
    Modal,
    Tooltip,
    Carousel,
    CarouselItem,
    Switch
};

const IviewModule = {
    ...components,
    iSwitch: Switch,  // html里面有switch标签,所以Switch组件使用时必须是i-switch
}
// 循环注册全局组件
Object.keys(IviewModule).forEach(key => {
    Vue.component(key, IviewModule[key])
})

// 将iview模块挂载到vue对象上,只挂载能使用到的,这里Notice我就没用到
Vue.prototype.$Message = Message;
Vue.prototype.$Modal = Modal;
Vue.prototype.$Spin = Spin;

2、更改nuxt.config.js

module.exports = {
  plugins: [
    // 这是我的插件目录,因为我配置了自定义主题,一般是 plugins/iview.js
    { src: '~plugins/my-theme/index', ssr: false },  // ssr要设置为false,不然后面会报ESModule错误
  ],
  build: {
    babel: {
            babelrc: true,  // 默认为false,改为true
            cacheDirectory: undefined,
            presets: ['@nuxt/babel-preset-app']
        }
  }
}

3、配置babel
安装babel-plugin-import插件,npm install babel-plugin-import -D
然后新建.babelrc文件夹

{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components",
  }]]
}

ok,到这里就配置完成了,可以使用webpack打包分析工具看看配置前后差别,对比一下。
可以执行nuxt build -a命令,打包完成后会自动分析结果,比较直观,就是下面图片的样子。

image.png

================================= 更新 ================================

后面发现问题,iview(view-design)使用的时候会报错,错误信息如下:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

这其实是使用vue-design的时候,没有开启服务端渲染,导致服务端生成的页面DOM内容和客户端不一致,会引起页面生命周期调用两次,解决办法:
在nuxt.config.js中开启服务端渲染

plugins: [
  { src: '~plugins/my-theme/index', ssr: true }
]

如果只这样写,你可能还会遇到一个错误


image.png

意思是ES Module在服务端不被支持,接下来还需要修改一下配置

build: {
  transpile: [/^view-design/]
}

相关文章

  • Nuxt iView(view-design) 按需加载

    本文说的主要是按需加载,全部加载的方式和使用就不说了,其实按需加载只需要更改相关配置就可以了。 1、首先更改plu...

  • iview

    基本使用 1.iview按需加载 import Checkbox from 'iview/src/componen...

  • quasar 引入 iview

    quasar版本1.15 按照iview-4.5npm install view-design --save安装过...

  • Nuxt element-ui 按需引入

    官方文档:按需加载 完整引入 1. 安装 babel-plugin-component: 2. 修改nuxt.co...

  • iview内存泄漏

    iview在升级到view-design之前,是存在严重的内存泄漏问题的,而如果你在项目中大量使用了iview组件...

  • iview 按需引入vue项目中

    按照官方文档把iview引入到vue的项目中,全部引入的时候没问题。当按官方文档显示的按需加载是借助插件babel...

  • elementUI按需引入两种方法

    这里写自定义目录标题element-ui中按需引入为什么选择 element-ui 而不是 iview 1、按需引...

  • 4.11.1 用 Webpack 实现按需加载

    4.11.1 用 Webpack 实现按需加载 问题一: 用 Webpack 实现按需加载? Webpack 内置...

  • 4.11.2 实例强化(按需加载与 ReactRouter)

    4.11.2 实例强化(按需加载与 ReactRouter)问题一: 按需加载与 ReactRouter? 实战中...

  • VUE首屏加载优化

    (1)组件按需加载;对Element-UI, Mint-UI组件进行按需加载;(2)路由组建懒加载;异步加载con...

网友评论

    本文标题:Nuxt iView(view-design) 按需加载

    本文链接:https://www.haomeiwen.com/subject/vhrzqhtx.html