Vue学习笔记：封装UI组件库

实例内容

封装常见的功能组件（Button，Modal，Form相关），封装完成后封装成UI组件库发布到NPM上。

实例目的

1. 掌握组件封装的语法和技巧
2. 学会造轮子，了解组件库实现原理
3. 搭建和积累自己的组件库
4. 学会组件库上传gitHub
5. 学会组件库打包，上传npm

----------------------------------------------------------------------------分割线---------------------------------------------------------------------------------
 

一、使用vue脚手架初始化一个项目

打开控制台，输入vue create zhb-ui 创建一个zhb-ui的vue项目；

注意：create 是vue cli3以上版本，低于版本请更新

二、Vue脚手架升级

2.1 查看自己脚手架版本

vue --version

vue --version

2.2：卸载原来的脚手架

npm uninstall vue-cli -g

npm uninstall vue-cli -g

2.3：安装脚手架

npm i @vue/cli -g

npm i @vue/cli -g

2.4：查看Vue-cli版本即可

1. 选择初始化设置内容

这里router和vuex就不需要了，不是开发项目

 

npm i @vue/cli -g

3、选择配置文件保存

 

三、如何封装，注册和使用一个组件

在componet下创建一个button.vue的文件，放置button组件代码。创建一个组建的button组件，，并且指定name为oneButton。

<template>
  <button class="zhb-button">
   按钮组件
  </button>
</template>
 
<script>
 
export default {
  name: 'ZhbButton'
}
 
</script>
 
<style lang="scss">
 
</style>

创建组件完成后，不能在项目中直接使用，需要到main.js中注册才可以使用。

import Vue from 'vue'
import App from './App.vue'
// 第一步：导入button组件
import ZhbButton from './components/button.vue'
 
Vue.config.productionTip = false
 
// 第二步：注册组件,设置(组件名，组件)
Vue.component(ZhbButton.name, ZhbButton)
 
new Vue({
  render: h => h(App)
}).$mount('#app')

注册完成后，组件就可以在项目中使用了。

<template>
  <div>
    <zhb-button></zhb-button>
  </div>
</template>

按钮效果：

组件最简单的封装，注册和使用方法就是这样一个流程。

 

学习封装UI组件笔记，有所欠缺，欢迎指教！