Vue-Element-UI 按需加载使用

Vue-Element-UI 按需加载使用

• 创建vue项目

vue create project-name

项目创建

• 安装Element-UI

  • 官网https://element.eleme.cn/#/zh-CN/component/installation

  • 项目安装element-ui

    vue add element
    

    • 基础项选择

      基础项目选择

• 使用最新创建的项目会自动创建plugin/element.js

import Vue from 'vue'
import {
    // 按需加载
    Button,
    Table,
    Message
} from 'element-ui'

//  Message 需要全局挂载
Vue.prototype.$message = Message
// 安装
Vue.use(Button)
Vue.use(Table)

• 基础使用

  使用流程

• 渲染效果

  渲染

• 其他细节用法,主要使用过程前期尽可能多的了解文档

JS 文件类型引入使用(体验差,问题是由于引入全局,体量过大)

• 在各自对对应的官网获取CDN链接,下载到本地

• 在对应文件引入下载的相应文件

  文件引入

• 基本使用

  jsp页面内使用vue

• 静态资源编译经过配置后才可以访问

  • 产生原因:AdBlockPlus插件也需要关闭

    产生原因

  • 配置

    配置webapp为 directory contents

  • 配置后

    配置成功

  • 最终改为下载文件

    文件模块使用

• 基础vue+ElementUI项目

  运行测试加载速度