【金秋打卡】第4天-玩转组件库搭建全流程

第一模块

​ 课程名称：玩转组件库搭建全流程

​ 章节名称：

• 3-1 设计组件
• 3-2 编写html结构的样式代码
• 3-3 编写逻辑代码
• 3-4 测试组件

​ 讲师姓名：郭小新

第二模块

​ 课程内容(概述)

​ 1、编写组件的流程

		- 设计组件
		- 编写html和样式
		- 编写逻辑代码
		- 测试组件

​ 2、设计组件的原则

​ 要能复用、通用

​ 3、项目信息

​ 基于webpack+vue2+scss

第三模块

用rollup打包组件库(二) - 编写组件逻辑

基于上一篇文章，这次我们来编写组件的逻辑。

项目结构

|-packages
|---components		 // 用于编写存放组件
|-----ext-button
|-------index.js
|-------main.vue
|---common			 // 存放公共样式文件	
|-----index.scss
|---index.js		 
|---rollup.config.js // 打包配置脚本

packages/components/ext-button/index.js

import ExtButton from './main.vue'
ExtButton.install = function (Vue) {
    Vue.component(ExtButton.name, ExtButton)
}
export default ExtButton

packages/components/ext-button/main.vue

由于button的高度、边框、文字颜色等都可以由Css来控制。因此定义text、clzss来控制button的内容和样式。

注：这里的button 要加上type属性。不然会出现表单自动提交或者按enter回车跳转页面问题。

<template>
    <button type="button" :class="clzss">{{ text }}</button>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'ExtButton',
    props: {
        text: String,
        clzss: String
    }
})
</script>

导出组件

// 公共样式类
import './common/index.scss'
import ExtButton from './ext-button/index.js'
function install(Vue) {
    Vue.component(ExtButton.name, ExtButton)
}
export { ExtButton }
export default {
    install
}

如何使用

<script>
import ExtButton from '../packages/ext-button/index.js'
</script>

<template>
	<ExtButton clzss="max-h-50 max-p-10" text="这是button" />
</template>

问题一：直接在页面引入组件报错The requested module does not provide an export named

// 错误 由于index.js是用export default方式导出，不能用对象结构
import { ExtButton } from "../packages/ext-button/index.js" 
// 正确
import ExtButton from "../packages/ext-button/index.js";

第四模块