真真的手摸手带你实现 vuejs 组件库

前言

如何做一个vuejs UI 组件库？最近也是手痒没事找事做，然后就突发奇想照着葫芦画瓢模仿（站在巨人的肩膀上抄），自己也来总结并记录一下这个构建的过程

前提

1. 你至少得用会 vue

2. 简单的封装过一些组件

3. 会吹牛

4. 会给我点个赞

好了就这四点，足矣

创建一个vue的项目

如果你觉得 vue-cli 不太符合你的需求，也可以自行创建

我们这里就直接使用 vue-cli啦

// 创建一个 cli
vue create laoyan-ui

手动选择配置

选择 babel 和 css 预处理器就好了

选择node-sass

选择package.json

是不是感觉回到了当初学 vue 的时光？对！就是纯手摸手的教学

好了废话不多说，创建好了，一起来造作吧

修改文件名称

好，我们进入到刚刚创建的项目目录中后，先不着急启动项目，我们要学会先规划大橘????，再付出行动

新建 packages

新建一个存放组件的文件夹 packages ，后面我们大部分组件开发工作也是在这里面进行的

修改 src

再将 src 文件夹改成 examples ，examples 我们用来做测试使用

新建 vue.config.js

module.exports = {
    pages: {
      index: {
        // 修改入口
        entry: 'examples/main.js',
        template: 'public/index.html',
        filename: 'index.html'
      }
    },
    chainWebpack: config => {
        config.module
          .rule('js')
          .include
            .add('/packages')
            .end()
          .use('babel')
            .loader('babel-loader')
            .tap(options => {
              return options
          })
     }
}

清理不需要的内容

将 examples/assets 里面的logo.png 删除

将 examples 的 components目录删除

将 examples  的 App.vue 删除成下面这样

<template>
  <div id="app">
    app.vue
  </div>
</template>

<script>

export default {
    name: 'App',
}
</script>

目录结构截图

启动项目

yarn serve