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

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

  • 产生原因

    产生原因

  • 配置

    配置webapp 为 directory contents

  • 配置后

    配置成功

  • 最终改为下载文件

    文件模块使用

• 基础vue+ElementUI 项目

  运行测试加载速度