船长的航行日记
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)

captain

心之所向,海的彼岸
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)
  • JavaScript

  • node

  • vue组件库开发实践

    • MSSUI的前世今生
      • 以Button组件为引
      • 图标引入
      • 自动化脚本命令
      • 组件国际化
      • 全部引入和按需加载
      • 通用组件实现
      • 发布npm和CDN
      • 搭建组件库文档
      • 组件预览和在线运行
      • 组件库文档发布到vercel
    • react

    • 学习笔记

    • vue3源码

    • 前端乱炖
    • vue组件库开发实践
    masongsong
    2021-05-24
    时间 3分钟
    阅读量 0

    MSSUI的前世今生

    # 前言

    博主所在公司使用的技术栈是Vue和ElementUI。作为一个有(在)梦(摸)想(鱼)的前端儿,很早就想研究一下ElementUI的实现原理。自己前前后后也看了不少解析的文章,基本都是浅尝辄止,没有去真正的实践,理解的就不是很深刻。于是博主就诞生了自己模仿ElementUI搭建一个组件库的想法。

    # 尝尝鲜

    # CDN引入

    MSSUI依赖于Vue (opens new window),所以首先得引入Vue:

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    
    1

    接着引入MSSUI的样式文件和js文件。

    <link rel="stylesheet" href="https://unpkg.com/mssui@0.1.13/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/mssui@0.1.13/lib/index.js"></script>
    
    1
    2

    # npm引入

    npm install mssui
    
    1

    然后在vue项目的入口文件main.js中引入:

    import Vue from 'vue'
    import App from './App.vue'
    import MssUI from 'mssui'
    import 'mssui/lib/theme-chalk/index.css'
    
    Vue.use(MssUI)
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    这样引入会引入全部的组件,对于只使用某几个组件的用户来说,肯定是很不友好的,所以MSSUI也提供了按需加载的能力。

    首先,安装babel-plugin-component

    npm install babel-plugin-component -D
    
    1

    然后配置babel.config.js文件如下:

    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset',
        ["@babel/preset-env"]
      ],
      "plugins": [
        [
          "component",
          {
            "libraryName": "mssui",
            "styleLibraryName": "theme-chalk",
          }
        ]
      ]
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    比如你仅仅使用了Button组件,你可以在main.js中这样做:

    import Vue from 'vue'
    import App from './App.vue'
    import { Button } from 'mssui'
    
    Vue.use(Button)
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    然后页面上这样使用:

      <ml-button>默认按钮</ml-button>
      <ml-button type="primary">主要按钮</ml-button>
      <ml-button type="sucess">主要按钮</ml-button>
    
    1
    2
    3

    你可以点击codepen (opens new window)在线测试。或者去MSSUI组件库官网示例 (opens new window)查看更多组件效果。

    # 本文主要介绍了什么?

    如何从0到1搭建、开发、发布一个组件库项目。

    # 项目搭建

    • 如何组织组件库的项目工程目录。
    • 如何使用脚本命令简化重复性的工作。如新增一个组件,只需要敲入make new componentName。

    # 组件开发

    • 如何使用sass和BEM规范进行样式隔离和命名规范。
    • 如何将图标字体文件全局引入,提供类似class="ml-search"的用法
    • 如何提供国际化能力
    • 如何提供全局加载和按需加载能力
    • 如何全局管理组件库弹窗组件的层级
    • 如何实现ElementUI常用的组件,如Button、Message、Card、Alert等

    # 组件库发布

    • 如何配置webpack将开发好的组件库源码打包成commonjs2、UMD规范的包
    • 组件库如何发布到CDN和npm,允许使用CDN和npm包的方式进行使用
    • 如何使用vuepress搭建组件库的官方文档,支持在线预览效果和codepen编辑。
    • 如何利用免费的静态资源托管网站,发布组件库文档公网访问

    # 项目的完整目录

    项目的完整目录如下图:

    ├── build
    │   ├── bin
    │   ├── webpack.common.js
    │   ├── webpack.component.js
    │   ├── webpack.demo.js
    │   └── webpack.umd.js
    ├── lib
    ├── public
    └── src
        ├── App.vue
        ├── assets
        ├── components.js
        ├── components.json
        ├── config
        ├── demo
        ├── docs
        ├── locale
        ├── main.js
        ├── mixins
        ├── packages
        ├── tests
        ├── theme
        ├── types
        └── utils
    ├── Makefile
    ├── README.md
    ├── gulpfile.js
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30

    解释下重要的目录:

    • build 存放组件打包、自动化的脚本命令
    • lib 存放打包输出的资源
    • components.json 使用JSON存放所有的组件
    • config 组件公共的配置
    • demo 本地调试组件
    • docs vuepress项目,用作生成组件的文档
    • locale 组件的国际化
    • mixins 组件中使用的混入
    • packages 存放组件
    • tests 单元测试
    • theme 组件样式
    • types 类型声明
    • utils 工具函数

    源码放放在了Github上,点击mssui (opens new window)获取。

    注意

    MSSUI仅用于学习,ElementUI作为业界非常成熟的UI库,已经基本能满足开发者大多数的需求。生产环境请使用ElementUI。

    编辑 (opens new window)
    #vue组件
    上次更新: 2021/10/16, 11:22:25
    node基本使用
    以Button组件为引

    ← node基本使用 以Button组件为引→

    最近更新
    01
    总结
    10-19
    02
    优化
    10-16
    03
    实现ref
    10-16
    更多文章>
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 生命绿
    • 收获黄
    • 天空蓝
    • 激情红
    • 高贵紫