最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来做下按需加载. 首先用Vue CLI 3.0新建一个项目 vue create bes-ui 注意的是cli3的脚手架用的Babel7的配置,只有babel.config.js文件,所以要自己添加.babelrc文件. 项目结构 新建项目之后,可以按照自己的想法建文件结构,也可以按照babel-pl…

说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名 <template slot-scope="scope"> <el-button type="text" size="mini" @click=&qu…

1,简单使用 vue项目中使用iview非常简单: 首先安装依赖: $ npm install iview --save 会安装最新版本的依赖,安装完成后package.json会出现如下图配置 表示iview已经安装完成 然后在main.js中引入“iview”和相应的css文件“iview/dist/styles/iview.css”,并use,即全局引用,如下图 此时即可以在所有组件中使用iview中的组件了. 2,按需加载 简单使用很简单,按需加载也并不复杂 按需加载要在简单使用的前提下…

require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数 语法: require(dependencies: String[], [callback: function(...)]) 参数 dependencies: 模块依赖数组 callback: 回调函数 require-ensure 说明: require.ensure在需要的时候才下载依赖的…

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello'import Province from '@/components/Province'import Segment…

路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染,提升切换性能. 相关的生命周期 created() { console.log('created') }, activated() { console.log('activated') }, deactivated() { console.log('deactivated') },…

Ant Design React按需加载 Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用: import { Alert, Form, Input, Button, Checkbox, Row, Col, message, Modal, Icon } from 'antd'; 3.安装组件 npm install babel-plugin-im…

1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": { "presets": [ "react-app" ], "plugins": [ "transform-runtime", [ "import", { "libraryName": &q…

在vue中使用import()来代替require.ensure()实现代码打包分离 一.require.ensure() 方法来实现代码打包分离 require.ensure() 是 webpack 特有的,已经被 import() 取代. require.ensure( dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String ) 给定 depe…

/* 前言 */ 自上而下的 职责和API应用层框架层框架浏览器 一 组件定义与调用 1.增加一个组件 tabview.css -------------------------------------------- .tabview_menu{xxxxx}; .tabview_content{xxxxx}; tabview.js ---------------------------------- var abc =5; function TabView(cfg){ this.a = cfg.…