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 ...
随机推荐
- pathway 中几张特殊的通路图
pathway 的ID 是5个数字的组合,在pathway 数据库中,有几类通路图非常特殊: 1) 第一类, 以 011 开头的通路 共有 01100, 01120, 01130 三张通路图,从外观 ...
- 上网爱快?EasyRadius FOR 爱快V2接口测试版正式推出,欢迎广大爱迷们测试噢
…… …… 有些人问:为什么上面要打省略号?那些因为此处省略无数字,但是我还是要和大伙们谈谈EasyRadius支持爱快的故事 早在2013年的时候,我们内部就有发布爱快接口,但是由于当时V1的爱快, ...
- “failed to excute script xxx” PyInstaller 打包python程序为exe文件过程错误
在使用PyInstaller打包python程序,打包命令为: pyinstaller -F -w -i manage.ico yourpyfile.py 顺便说一下几个参数的作用 -F:是直接生成单 ...
- linux mysql卸载
卸载mysql 1.查找以前是否装有mysql 命令:rpm -qa|grep -i mysql 可以看到mysql的包: mysql-libs-5.1.71-1.el6.x86_64 2.删除mys ...
- 使用UWA GOT优化Unity性能和内存
优化百科: https://blog.uwa4d.com/archives/Index.html https://blog.uwa4d.com/archives/Introduction_UWAGOT ...
- duilib进阶教程 -- 在MFC中使用duilib (1)
由于入门教程的反响还不错,因此Alberl就以直播的形式来写<进阶教程>啦,本教程的前提: 1.请先阅读<仿迅雷播放器教程> 2.要有一定的duilib基础,如果还没,请先阅读 ...
- [React] 15 - Redux: practice IM
本篇属于私人笔记. client 引导部分 一.assets: 音频,图片,字体 ├── assets │ ├── audios │ ├── fonts │ └── images 二.main&quo ...
- [Optimisation] Read & Write file on Hard Disk
Ref: 探寻C++最快的读取文件的方案 方法/平台/时间(秒) Linux gcc Windows mingw Windows VC2008 scanf 2.010 3.704 3.425 cin ...
- 【GIS】Vue esri-leaflet
1.npm install esri-leaflet --save 2.引入包 import Leaflet from "leaflet"; var esri = require( ...
- python 如何在一个.py文件中调用另一个.py文件的类
如果是在同一个 module中(也就是同一个py 文件里),直接用就可以如果在不同的module里,例如a.py里有 class A:b.py 里有 class B:如果你要在class B里用cla ...