给颗星星github:github.com/trsoliu/iVi…

在实际项目开发中，越来越多的模块代码被引入，虽然我们做了很多异步加载的办法，但是代码的体量还是会越来越大；

我们拿iView做了几个项目后，发现iView的很多模块都没有用到，常用的就40～70%左右；

我们看下iView体积：

v2.14.0-rc.1


iView.min.js 1.4MB


iView.min.js 504KB

很显然，已经很大了；

为了首屏加载速度，为了产品，为了运营，为了。。。

我们不得不对iView做模块管理；

其实官方已经提供了方案：

www.iviewui.com/docs/guide/…

按上面的方法，把需要的，一个一个加入进去；

w...wtf.

太随意了，对于懒人来说，还是全量引入来的随意；

有没有一个全的、写好的呢？有！

废话少说；

在构建好项目目录结构后：

我们新建一个iview的文件夹，添加一个index.js;

在项目的main.js中import进来；

接下来，我们来在index.js中我把全量的iView模块都写进去了，使用的时候把不用的注视掉即可：

import Vue from 'vue'
import 'iview/dist/styles/iview.css'
//iview基础模块
const components = {Affix,Alert,AutoComplete,Avatar,BackTop,Badge,Breadcrumb,BreadcrumbItem,Button,ButtonGroup,Card,Carousel,CarouselItem,Cascader,Checkbox,CheckboxGroup,Col,Collapse,ColorPicker,Content,DatePicker,Dropdown,DropdownItem,DropdownMenu,Footer,Form,FormItem,Header,Icon,Input,InputNumber,Scroll,Sider,Submenu,Layout,LoadingBar,Menu,MenuGroup,MenuItem,Message,Modal,Notice,Option,OptionGroup,Page,Panel,Poptip,Progress,Radio,RadioGroup,Rate,Row,Select,Slider,Spin,Step,Steps,Table,Tabs,TabPane,Tag,Timeline,TimelineItem,TimePicker,Tooltip,Transfer,Tree,Upload
}import {Affix,Alert,AutoComplete,Avatar,BackTop,Badge,Breadcrumb,BreadcrumbItem,Button,ButtonGroup,Card,Carousel,CarouselItem,Cascader,Checkbox,CheckboxGroup,Circle,Col,Collapse,ColorPicker,Content,DatePicker,Dropdown,DropdownItem,DropdownMenu,Footer,Form,FormItem,Header,Icon,Input,InputNumber,Scroll,Sider,Submenu,Layout,LoadingBar,Menu,MenuGroup,MenuItem,Message,Modal,Notice,Option,OptionGroup,Page,Panel,Poptip,Progress,Radio,RadioGroup,Rate,Row,Select,Slider,Spin,Step,Steps,Switch,Table,Tabs,TabPane,Tag,Timeline,TimelineItem,TimePicker,Tooltip,Transfer,Tree,Upload
} from 'iview'const iviewModule = {...components,//不能和html标签重复的组件，添加别名(除了Switch、Circle在使用中必须是iSwitch、iCircle,其他都可以不加"i")iButton: Button,iCircle: Circle,iCol: Col,iContent: Content,iForm: Form,iFooter: Footer,iHeader: Header,iInput: Input,iMenu: Menu,iOption: Option,iProgress: Progress,iSelect: Select,iSwitch: Switch,iTable: Table
}
//循环注册全局组件
Object.keys(iviewModule).forEach(key => {Vue.component(key, iviewModule[key]);
});//将iview模块挂载到vue对象上去
Vue.prototype.$Loading = LoadingBar;
Vue.prototype.$Message = Message;
Vue.prototype.$Modal = Modal;
Vue.prototype.$Notice = Notice;
Vue.prototype.$Spin = Spin;复制代码

好了，接下来，把你不用的注视掉就可以了；

获取文档地址：github.com/trsoliu/iVi…