自定义Vue前端组件

前述：最近在学习element-ui，试着搭建自己的前端组件库（基于Vue），并发布到npm

一、搭建目录结构

1. 创建目录 lushuixi-ui 并打开目录

2. # npm init ，生成一个package.json文件

3. 搭建目录结构

•    packages 组件包目录
•    src 源码入口目录
•    scripts 脚本执行目录
•    README.md
•   package.json
•   .gitignore

4. 在packages目录创建一个button组件

•     创建button目录
•     创建button/src/button.js
•     创建button/index.js

// version 1.0.0  
// button/index.js

 import Button from './src/button';


/* istanbul ignore next */

// 在Vue.use(Button) 时调用组件上的intall

Button.install = function (Vue) {

    // 全局注册组件

    // react与vue不同的是, vue组件必须注册(或全局注册,或局部注册)

    Vue.component(Button.name, Button);

};


export default Button;

注意：

•   这里因为vue注册组件的时候，定义组件名有两种方式【kebab-case（短横线分隔命名） |  PascalCase（首字母大写命名）】