Vue-Cli 4.0 CDN方式使用view-design (iview4)

通过CDN方式使用iView框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <!-- 引入Vue --> <script src="//v1.vuejs.org/js/vue.min.js">&lt... 阅读详情

使用CDN方式加载view-design可明显减小 chunk-vendors.js 文件尺寸,提高页面加载速度。

配置方法如下:

1. 在vue.config.js里增加 configureWebpack,表示Vue和view-design从外部CDN加载。

configureWebpack: {
	externals: {
	    vue:"Vue",
		"view-design": "iview"
	}
},

注意:不能仅从外部加载view-design会报错,必须同时从外部加载Vue

2.在public/index.html增加引用 

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css"> 
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>

其他配置不用动,main.js里保持不变

import ViewUI from 'view-design'
Vue.use(ViewUI);

如果不使用外部的cdn,需要把整个view-design的dist文件夹下载部署

UNPKG - view-designhttps://unpkg.com/browse/view-design@4.7.0-beta.11/dist/

iview/view-design+vue2实现表单校验 iview是一款基于Vue.js的开源UI组件库,提供了丰富的组件和样式,支持响应式布局和多语言环境。它使用了最新的前端技术,如ES6、Webpack和SASS,让开发者可以快速构建高质量的Web应用程序。View-design是一款基于Vue.js的开源UI组件库,它的设计理念是简单、易用、美观。它提供了众多的组件,如按钮、表单、弹窗、表格等,并且还支持多种主题和组件扩展,开发者可以根据自己的需求进行定制。俩者之间主要的区别是vue的版本不同,这里以vue2为例实现代码。 阅读详情

相关推荐

在vue项目中引用Iview的方法

关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。 特性 # 高质量、功能丰富 友好的 API ,自由灵活地使用空间 细致、漂亮的 UI 事无巨细的文档 可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView from 'iview' //引入ivew库 import 'iview/dis

使用CDN的方式使用Vue 和 iview构建vue项目

使用CDN的方式使用Vue 和 iview构建vue项目一、CDN的方式是什么二、为什么采用cdn的方式三、过程1 引入vue.js和iview。2 基本功能3 组件功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaT......

追逐丶的博客 1万+

VIVADO网表文件DCP和EDF

为了便于模块化设计,同时保护自己的知识产权,Xilinx VIVADO 提供两种代码封装方法:DCP文件和edf文件。

u014035968的博客 1万+

自定义View(二)——文字滚动、动态画圆

反反复复

可乐淘的专栏 785

STM32接入CH340芯片的升级电路及初始化进入升级模式(死机)问题处理

MCU-REST 在 MCU-BOOT0 处于低电平状态下,进行下拉操作,在MCU-REST 与 MCU-BOOT0 恢复正常电平时,将导致MCU死机,MCU-REST 先于 MCU-BOOT0 下拉可解决该问题;MCU-REST 在 上升沿结束时将判断 MCU-BOOT0 的状态,MCU-BOOT0 处于高电平,MCU死机,MCU-BOOT0 处于低电平 MCU 正常;

LuDvei的博客 2491

ANSYS-CFX,计算时报错,内存参数报错,return code 1【终极解决方案】

ANSYS-CFX,计算时报错,内存参数报错,return code 1【终极解决方案】 在CFX计算时经常会遇到内存不足的错误报告,有的算例网格并不多也会出现这样的问题,本文就最近遇到的内存错误问题以及解决方法进行简单的总结,以供大家参考。 1 CFX-Solver Manager内存种类 打开Define Run,面板上的Partitioner、Solver、Interpolator选项中分别都有关于内存的设置选项。当出现内存不足错误时,应该设置哪一个选项的内存参数,要看是哪一部分的内存不足。 2 C

深海民工CFDer 3万+

2024年最受欢迎的Vue.js组件库 - ViewDesign全面解析

作为2024年最受欢迎的Vue.js组件库之一,ViewDesign凭借其现代化设计理念、强大功能和可定制性脱颖而出。这款开源UI组件库提供了丰富的基础组件、数据展示组件和交互反馈组件,涵盖了大部分Web开发场景。同时,ViewDesign还具备良好的可访问性、完善的文档、活跃的社区支持,并对SEO进行了高度优化。无论是企业级应用还是个人项目,ViewDesign都将是您的得力助手,帮助提高开发效率,打造出卓越的应用体验。

寻找灵感,发现精彩。 3039

森林冰火人html源码,森林冰火人单人版(源码)

【实例简介】java小游戏——森林冰火人,单人游戏, 实现人物行走,跳跃,吃水晶,具有计时功能,积分功能,倒计时结束游戏失败。【实例截图】【核心代码】森林冰火人单人版├── bin│ ├── game│ │ ├── Help.class│ │ ├── Logon.class│ │ ├── Main.class│ │ ├── Mykey.class│ │ ...

weixin_42507981的博客 6197

view-design组件使用Vue+Input+Table实现动态搜索值并单选

使用了input更方便、简洁,下面上封装的大致代码。实现的效果如图输入名字,动态模糊查找名字展示相关名字的表格列表,单击选择名字后则关闭表格。

Jet_Lover的博客 1718

C#项目实战——YModem协议文件传输【实例】

1、先由上位机发送*update*的握手信号,下位机返回响应字符‘C’(字符C,ASII码为0x43),之后通信双方开始以YMODEM协议进行数据通信。2、 YMODEM协议格式说明(1)起始帧数据格式帧类型(1byte)帧序号帧序号反码传输的文件名文件大小数据CRCSOH00FFfilenamefileziseNULCRCSOH=0x01,表示这个数据帧中包含着128个字节的数据(STX表示1024字节,初始帧只有128个);00表示数据帧序号,初始是0,依次向下排。

做有价值的事,积累有价值的笔记! 3655

STM32开发 -- GPIO详解

之前有简单讲过GPIO工作模式和寄存器,还是有点没搞明白。这次需要全方位的看一下了。 一、数据手册 1、STM32F105RC引脚说明 可知:STM32F105RC 一共有4组IO口 一共16X3+3=51个IO GPIOA0~A15 GPIOB0~B15 GPIOC0~C15 GPIOD0~D2 2、程序定义 GPIO端口号 STM32F1...

不积跬步,无以至千里 5万+

CDN 传统方式引入Iview icon不显示

因为需要字体文件可以在github上下载将文件下载之后放到fonts文件夹下   ,fonts 文件夹要与IView.css在同级目录

HC1qq的博客 7706

yolov11添加P2小目标检测头与添加P6超大目标检测头

本文介绍了YOLO目标检测模型中上下采样的原理及应用。上采样通过插值算法放大特征图,YOLO通常采用最近邻插值;下采样则通过带步长的卷积缩小特征图提取高层语义特征。文章详细阐述了这两种操作在YOLO中的实现方式、结构特点及对称性问题,指出下采样后会使用C3模块进行特征整合,上采样后通过concat抑制分割感。此外,还分析了不同分辨率特征图适合检测不同尺寸目标的原因,并提出添加4倍小目标检测头的方法,即对上采样后的特征进行concat和C3模块处理。最后给出了YOLOv5原模型结构和添加4倍检测头后的结构对比

m0_64661770的博客 821

Vue 完整版系统知识文档

《Vue全栈开发实战手册》摘要 本手册系统整合Vue2/Vue3全栈知识体系,涵盖基础语法、组件开发、状态管理、工程化等核心内容,适合从入门到精通的完整学习路径。主要特点: 基础核心 详解MVVM架构和响应式原理(Vue2的Object.defineProperty vs Vue3的Proxy) 完整模板语法规则与16种内置指令解析 组件系统核心:通信机制(8种方案)、插槽、动态组件、递归组件 进阶实战 状态管理:Vuex/Pinia完整解决方案 路由开发:动态路由、权限控制、懒加载 工程化:Webpack

专注 Java 后端开发,分享基础语法、JVM、并发、Spring 全家桶、微服务、分布式、性能优化等实战干货。坚持输出高质量技术笔记,用简单语言讲清复杂原理,助力每一位 Java 开发者稳步进阶。 402

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

如何使用View Design编写 crud组件

为了使用 View Design 编写 CRUD 组件,你需要按照以下步骤操作: 在 View Design 中创建一个新的组件,然后指定组件的类型为 CRUD。 在组件中定义你所需要的字段,并为每个字段指定数据类型和其他属性。 在组件的视图中定义你所需要的表单,用于显示和编辑字段的值。 在组件的控制器中编写代码,用于实现 CRUD 操作。这些操作包括: 创建新记录(Create) ...

weixin_35755823的博客 297

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

vue-cli4 + view-design(iview)

因为项目要求用到定制主题,所以依照官方文档开始配置文件。在配置过程中遇到点问题。变量覆盖的方式可以成功配置颜色,用工具安装的方式没有成功,不知道是不是用脚手架搭建项目后与这种方式有冲突。本次配置是变量覆盖方式配置。 在全局样式文件里引用依赖包里的index.less样式文件,之后在main.js文件里引用你的全局样式文件。这种方式需要在vue.config.js配置文件里添加css样式配置...

qq_41870566的博客 3346

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

【Axure模版素材】ViewDesign 4.0组件库/元件库 - AxureMost

ViewDesign UI组件库,它为Web开发提供了丰富的基础、数据展示和交互反馈组件。ViewDesign的这些组件和样式设计注重用户体验和界面的一致性,同时提供了良好的可访问性和SEO优化,适合构建各种Web应用界面。【Axure模版素材】ViewDesign 4.0组件库/元件库。

2403_89245059的博客 2054

下载使用IVIEW4.0组件库的过程以及遇到的一个问题

1.安装 npm install view-design --save 2.在main.js入口文件引用 import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); 3.使用表单遇到了错误,下图是报错位置 原因是:vue将标签渲染为原生html标签时,由于这些标签是自闭合的,所以有end标签会报错。 所以我们在根目录的.eslintrc.js的rules:{.

曾小超的博客 767

视图更新科技发布 View UI 组件库(即 iView 4.0),超过50项更新

写在前面 金秋十月,iView 4.0 如约而至。但是标题信息量有点大,所以先来解读一下标题。 iView 作者 Aresn 于 2019 年创办了北京视图更新科技有限公司,开始自由、全职地维护 iView 及其相关的软件。View UI 即为原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo。iView 作者将在新仓库 github.com/v...

Cool的博客 5931

iview(view-design)使用定制主题报错问题——vue-cli 4

iview(view-design)使用定制主题报错问题——vue-cli 4踩坑报错

weixin_49032614的博客 816

Ant-Design-Vue快速上手指南+排坑

Ant-Design-Vue 是一个功能强大且设计优雅的 Vue UI 库,适合各种类型的 Web 应用开发。通过正确的安装配置和对常见问题的排查处理,你可以充分利用 Ant-Design-Vue 提供的丰富组件和特性,提高开发效率,构建出高质量的应用。希望这个指南能帮助你快速上手 Ant-Design-Vue,并顺利避开常见的开发坑。

AI逍遥子 1315

iview----更改主题色

适用于Vue-Cli3创建的项目。

cookie-y的博客 1879

使用cdn的形式创建vue项目

使用cdn的形式创建vue项目一.实例化vue二.引入第三方组件库1.引入elementUI2.使用组件3.效果图三.开发组件1.创建pageA目录,并新建pageA.js2.在index.html中引入该文件3.使用该组件4.效果图四.路由1.引入路由文件2.引入路由组件3.最终效果 一.实例化vue 创建index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

csdn_chengpeng的博客 6892

记录:iview升级至4.0.0最新版本

View UI(iview)从4.0.0版本开始,需将npm包iview替换为view-design 老用户升级 升级 法1.直接执行命令:npm install view-design --save(直接更新到最新版,package.json不用再动) 法2. package.json中添加view-design: "dependencies": { "view-design": ...

weixin_43652669的博客 5689
上一篇: vForm自定义组件说明
下一篇: Vue3+Echart+百度地图 显示热力图
Justin_Chia
博客等级 码龄19年 16粉丝 24原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值