vue项目引用 iView 组件——全局安装与按需加载
框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库。使用方法官网很详细。
官网:https://www.iviewui.com/
这篇文章主要是记录一下npm 全局安装以及按需引用的用法。
一、全局引用
①、先安装iview npm install iview -save
Tips:你可能注意npm install 的时候,有时候会加--save,有时又是--save-dev,那他们该什么情况下区分使用呢。发现一篇比较不错的文章https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html
②、在 webpack 入口页面 main.js 中如下配置
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
③、在组件里面直接调用 如:<Button>Default</Button>
二、按需引用(前提是按照全局引用的步骤①②安装了需要的组件)
借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积。
①、先安装 babel-plugin-import npm install babel-plugin-import --save-dev
②、在文件 .babelrc 中添加配置
"plugins": [
"transform-vue-jsx", "transform-runtime",
["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]
]
本以为万事大吉,可以开始用了,但是报错了!!!!!
别慌~~~~~~查阅一些资料之后了解到,添加按需加载的插件之后就不可以用下面的方式引入iview。main.js只需配置css
import Vue from 'vue'
// import iView from 'iview'
import 'iview/dist/styles/iview.css' // Vue.use(iView);
③、按需引用可以在全局注册组件也可以在调用的页面注册
aaa~组件中调用方法
<template>
<Button type="success">Success</Button>
</template>
<script>
import { Button } from 'iview' //用到什么组件引入什么组件
export default {
components:{
Button
}
}
</script>
bbb~全局注册需要用的组件
import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);
下面就来验证一下结果, 打包后的vender.js确实变化比较大。
vue项目引用 iView 组件——全局安装与按需加载的更多相关文章
- 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...
- 移动端 vue + mintUI 实现头部页签切换,按需加载~
记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是 ...
- vue项目实现路由按需加载的3种方式
vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- vue-cli按需加载,懒加载组件
vue来做一个单页面应用,当我们的项目越来越大,组件越来越多的时候,首次启动项目户特别慢,就算做一个加载框,蒙层之类的,体验也不会好,这个时候就需要按需加载 1.什么叫按需加载 所谓按需加载,顾名思义 ...
- 基于create-react-app脚手架,按需加载antd组件以及less样式
摘要 为了更好的书写css样式,在react中引入less,在网上查询了许多关于react引入less样式文件的资料,大多数都是需要在react项目中npm run eject暴露出底层文件,然后在底 ...
- vue 按需加载,缓存,导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
- iview简单使用+按需加载组件的方法(全局和局部)
1,简单使用 vue项目中使用iview非常简单: 首先安装依赖: $ npm install iview --save 会安装最新版本的依赖,安装完成后package.json会出现如下图配置 表示 ...
- vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
随机推荐
- JAVA基础知识点总结(全集)
1.JAVA简介 1.1java体系结构:j2se,javaweb,j2ee 1.2java特点:平台无关(虚拟机),垃圾回收(使得java更加稳定) 1.3 JDK与JRE,JDK:java开发环境 ...
- thinkphp5 memcached 安装、调用、链接
环境 linux memcached1.5.9 (memcached安装在虚拟机192.168.70.164) wampserver集成环境 thinkphp5 php7 步骤一:linux安装me ...
- 仿迅雷播放器教程 -- 基于VLC的C++播放器 (4)
经过前面的介绍,想必大家对VLC和ffmpeg都有一定印象了,还记得学习ffmpeg多么蛋疼吗?那么VLC会不会也这么蛋疼呢? 那么我们来看一段官方的Demo,Alberl精简了Demo,只留 ...
- ASP.NET MVC 4 (九) 模型绑定
模型绑定指的是MVC从浏览器发送的HTTP请求中为我们创建.NET对象,在HTTP请求和C#间起着桥梁的作用.模型绑定的一个最简单的例子是带参数的控制器action方法,比如我们注册这样的路径映射: ...
- 【NLP】分词 新词
基于大规模语料的新词发现算法 https://blog.csdn.net/xgjianstart/article/details/52193258 互联网时代的社会语言学:基于SNS的文本数据挖掘 h ...
- 5. RAMN备份与恢复
一. rman简介 RMAN(Recovery Manager)是一种用于备份(backup).还原(restore)和恢复(recover)数据库的 Oracle 工具.RMAN只能用于ORACLE ...
- jstat 简介
1. jstat -gc pid 可以显示gc的信息,查看gc的次数,及时间. 其中最后五项,分别是young gc的次数,young gc的时间,full gc的次数,full gc的时间,gc ...
- 理解syslinux,SYSLINUX和PXELINUX
在研究网络装机的过程中,菜菜地被Syslinux.SYSLINUX和PXELINUX这些定义折磨了一下 它们有什么区别和联系?为什么配置PXELINUX要安装的是Syslinux而不是Pxelinux ...
- Unity3D Shader 按百分比裁剪模型
Shader Shader "Unlit/Disappear" { Properties { _MainTex ("Texture", 2D) = &qu ...
- python-Levenshtein几个计算字串相似度的函数解析
linux环境下,没有首先安装python_Levenshtein,用法如下: 重点介绍几个该包中的几个计算字串相似度的几个函数实现. 1. Levenshtein.hamming(str1, str ...