ㅤcoderitl

V1

2022/03/13阅读:47主题:萌绿

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
    jsp页面内使用vue
  • 静态资源编译经过配置后才可以访问

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

      产生原因
      产生原因
    • 配置

      配置webappdirectory contents
      配置webapp为 directory contents
    • 配置后

      配置成功
      配置成功
    • 最终改为下载文件

      文件模块使用
      文件模块使用
  • 基础vue+ElementUI项目

    运行测试加载速度
    运行测试加载速度

分类:

后端

标签:

后端

作者介绍

ㅤcoderitl
V1