前言
什么叫组件化
将页面拆分开为多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护.因为组件是资源独立的,所以可复用性高,组件和组件之间也可以嵌套,对于项目后期的需求变更和维护也更加友好.
如何进行组件化开发
自定义组件必须进行注册,Vue则提供了两种注册方式:全局注册/局部注册
-
全局注册
使用
Vue.component(tagName, options)
进行全局注册,注册的组件会挂载到Vue.options.components
上 -
局部注册
使用
components
在组件的内部进行局部注册,并且挂在到vm.$options.components
上
因为全局注册挂载的对象不同,这也是全局注册的组件可以任意使用的原因
import HelloWorld from './components/HelloWorld'
export default {
components: {
HelloWorld
}
}
所需技术栈
Vue
webpack-simpl
只开发组件,不需要那么多的配置,webpack-simpl
作为简化版已经足够
所需基本知识
-
name
组件的名称(必填),js
中使用驼峰式命名,html
中使用kebab-case命名 -
props
组件属性,用于父子组件的通信.接收使用组件的父组件的传值 -
computed
处理data或者props中的属性,并返回一个新的属性. -
slot
插槽分发内容,有传入时显示,无传入DOM时显示默认,分为无名和具名两种. -
class
定义子组件的类名,代码参考props
实现思路
目录结构
参考Element-UI的源码按需引入的思路,构建出的目录结构
- 先输入
vue init webpack-simple ————
(横线处代表项目名称)构建一个项目,按步骤输入命令,启动项目
src
|——assets -- 项目样式文件
|——components -- 总组件文件夹
|——Button -- 根据不同组件命名封装,便于结构清晰可维护
|——button.vue -- 所封装的组件
|——index.js -- 组件提供 install 安装方法,供按需引入
|——index.js -- 整合所有的组件,对外导出,即一个完整的组件库
封装组件
封装一个Button组件
<template>
<button
class="mia-button"
@click="handleClick"
:type="nativeType"
:disabled="miaDisabled"
:class="[
type ? 'mia-button--' + type : '',
{
'is-disabled': buttonDisabled,
}
]"
>
<span v-if="$slots.default"><slot></slot></span>
</button>
</template>
<script>
export default {
name: "miaButton",
props: {
type: {
type: String,
default: ''
},
nativeType: {
type: String,
default: 'button'
},
disabled: Boolean,
},
computed: {
buttonDisabled() {
return this.disabled || (this.elForm || {}).disabled;
}
},
methods:{
handleClick(evt) {
this.$emit('click', evt);
}
}
}
</script>
css代码就不粘贴了
根据之前整理的组件开发基础知识,就可以看懂以上代码~
按需引入
在组件同级目录下的index.js
文件里写入提供install的安装方法
// 导入组件必须声明name
import Button from "./button";
// 为组件提供 install 安装方法
Button.install = function (Vue) {
Vue.component(Button.name,Button)
}
// 默认导出组件
export default Button
导出组件
在components
文件夹下的index.js
文件里写入
// 导入下拉按钮组件
import button from './Button/button'
// 存储组件列表
const components = [
button
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
button
}
配置项目
1.修改package.json
-
修改private字段
private是true的时候不能发布到npm,需设置成false
-
增加main字段
main字段是require方法可以通过这个配置找到入口文件
"name": "style-library-y", // 文件名是自己起的哈
"description": "这只是一个用来测试的文档",//描述
"version": "1.0.20", //版本号,在每次往npm更新前都要改一变版本号
"author": "", // 署名
"license": "MIT",
"private": false, // 发布到npm上要改
"main": "./dist/style-library-y.js"
2.修改 webpack.config.js
-
修改entry
入口会根据开发环境 ,生产环境切换
-
修改output
3.修改index.html的js引用路径
修改了output 的 filename 所以这块的引用也要更改一下
4. npm run build 打包
npm 发布
- npm官网注册一个帐号(注册后会往邮箱发两个邮件,有一个是激活邮箱的,一定要点!否则会发布不成功)
- 在该组件根目录下的终端输入
npm login
按提示输入 - 输入完成后
npm publish
就发布完成了 - 之后在npm官网自己的主页里就可以看到发布的包