Vue2封装自制组件（一）：准备及全局引入

  在使用vue样式的时候总是感觉非常不自在，无论是electron-ui还是iview等样式，用起来都不太理想，修改样式又觉得过于麻烦，定制主题依旧还是有些样式规划令人糟心。

  这时谁会拒绝自制一款属于自己的主题呢？

一：目录结构。

主目录中新建一个文件夹，我这里是viry-ui，目录内新建index.js

新建button文件夹：src文件夹和index.js

src文件夹：button.vue

二：index.js全局注册组件

import Button from './button/index.js';

const components = [
	Button
];


// 定义 install 方法，接收 Vue 作为参数，如果使用 use 注册插件，则必须所有的组件都被注册
const install = function(Vue) {
	components.forEach(component => {
		Vue.component(component.name, component);
	});
};
// 判断是否是直接引入文件，如果是，就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
	install(window.Vue)
}

export default {
	install,
	Button
}

三：main.js引入组件

文件目录根据自己UI存放地址修改，UI目录内新建css文件夹和index.css来存放样式

import ViryUI from './assets/viry-ui/index.js'
import './assets/viry-ui/css/index.css';

Vue.use(ViryUI);

四：组件使用示例

<vi-button>默认按钮</vi-button>
<vi-button type="primary">主要按钮</vi-button>
<vi-button size="medium">大型按钮</vi-button>
<vi-button size="small">小型按钮</vi-button>
<vi-button size="mini">迷你按钮</vi-button>

效果：

未完待续，下章开始正式创建组件……