实例目的
- 掌握组件封装的语法和技巧
- 学会造轮子,了解组件库实现原理
- 搭建和积累自己的组件库
实例内容
封装常见的功能性组件(button、Modal、Form相关)。把组件封装成 UI 组件库,并发布到 npm 上。
涉及知识
- vue 基础语法
- 组件基本语法
- 组件通讯(sync,provide,inject)
- 插槽的使用
- props 校验
- 过渡与动画的处理
- 计算属性、监听属性
- v-model 语法糖
- vue 插件机制
- npm 的发布
使用 vue cli 初始化一个项目
使用 vue created wyh-ui,创建一个名为wyh-ui的项目。
按照自己的习惯设置脚手架风格.
脚手架搭建完毕后,将 App.vue 文件下的自带内容清理一下,为后续开发做准备。
封装、注册及使用组件
在 component 下创建 Button.vue 放置相关代码,并且指定其 name 属性。
<template>
<button class="one-button">
按钮组件
</button>
</template>
<script>
export default {
name: 'wyhButton'
}
</sc