一：element组建 地址：http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.引入npm i element-ui -S 2.使用 1.完整引用 import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 2.按需引用 需安装 babel-plugin-component
安装： 1.npm install babel-plugin-component -D 2.修改.babelrc 改成：{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime",["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 3.使用 import { Button, Select } from 'element-ui'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select)

二：懒加载 地址：https://github.com/hilongjw/vue-lazyload 1.引入 ： npm install vue-lazyload -D 2.两种形式 1. main.js:Vue.use(VueLazyload) 需求情况:每个图片的加载中和加载错误时显示不一样的图片 对应：imgObj: { // 当加载本地图片是必须使用 require 加载 网络图片则不用 src: require("../assets/big.jpg"), //src:"https://image.baidu.com/search3slist=&querylist=&selected_tags=0", error: require("../assets/error.png"), loading: require("../assets/loading.gif") } 2.main.js:Vue.use(VueLazyload, { 需求情况:每个图片的加载中和加载错误时显示一样的图片 preLoad: 1.3, error: './assets/error.png', loading: './assets/loading.png', attempt: 1 }) 对应：imgObj:require("../assets/big.jpg")

    展现形式：<img  v-lazy="imgObj"/>
    

3.npm发布组件 1.npm发布一个包 1.注册npm 账号 npmlipengbo npm123321 2.cmd 登陆账号 npm login 2.创建自己的组件 1.初始化项目 2.修改 package.json文件 "private":false

		"main":"dist/vue-counter.min.js"
		
3.修改webpack.prod.config.js文件
    1.修改out输出目录
    2.删除无用内容
4.修改输出
	1.修改main.js文件，输出自己的组件即可使用