关于vue.js:真正的手摸手带你实现-vuejs-组件库

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

你至多得用会 vue
简略的封装过一些组件
会吹牛
会给我点个赞

好了就这四点，足矣

如果你感觉 vue-cli 不太合乎你的需要，也能够自行创立

咱们这里就间接应用 vue-cli 啦

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

手动抉择配置

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

抉择 node-sass

抉择 package.json

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

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

好，咱们进入到刚刚创立的我的项目目录中后，先不焦急启动我的项目，咱们要学会先布局大橘🍊，再付出口头

新建一个寄存组件的文件夹 packages，前面咱们大部分组件开发工作也是在这外面进行的

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

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

启动实现，关上浏览器

到这里，你就曾经差不多做完了组件库的后期筹备性工作

咱们所有的组件放在 packages 目录下，那么目录构造必定是长这样

|packages
|--- aComponent
|--- bComponent
|--- cComponent

那么咱们须要一个 index.js 文件用于引入这些组件，而后再去裸露

哎～先不论这 index.js 咱们先轻易写一个组件 (一看就会的组件— 文本链接)，保障能够失常应用组件先

咱们暂且称之为 ly-link

|packages
|--- lyLink
|---|--- src
|---|---|--- index.vue

将 index.vue 写成这鸟样

<template>
    <!-- 用传过来 href 进行跳转 --> <!-- 用传过来的 type 批改色彩 --> 
    <a :href="href || undefined" :class="[`ly-link-${type}`]" >
        <!-- 应用默认插槽来填充文本 -->
        <slot/>
    </a>
</template>

<script>
    export default {
        // 等下 index.js 外面要用到
        name:"lyLink",
        props: {
            // 限度类型
            href: String,
            type: {
                type: String,
                default: 'default'
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 定义链接字体色彩
    .ly-link-default {color: #606266;}
    .ly-link-primary {color: #409eff;}
</style>

组件写完了，而后咱们在examples/App.vue 中测试一下

<template>
  <div id="app">
    <!-- 应用组件 传入 type -->
    <ly-link type="primary"> 老严 link </ly-link>
  </div>
</template>

<script>
// 引入组件
import lyLink from '../packages/lyLink/src'
export default {
    name: 'App',
      // 注册组件
    components: {lyLink}
}
</script>

看看成果

看起来没啥故障，然而咱们认真一品，这不对呀，咱们应该是要入口文件 main 中全局引入的呀

好，那咱们回到刚刚说的 index.js 中来，咱们通过 index.js 作为裸露组件的 js

// 引入组件
import lyLink from './lyLink/src'
// 寄存组件的数组
const components = [lyLink]

// 定义 install 办法，接管 Vue 作为参数。const install = function (Vue) {
    // 判断是否装置
    if (install.installed) return
    // 遍历 components 数组，来进行全局注册
    components.map(component => {Vue.component(component.name, component)
    })
}

export default {// 导出的对象必须具备 install，能力被 Vue.use() 办法装置
    install,
    lyLink
}

而后我门来到 main.js 中, 引入咱们刚刚写的 index.js 文件

import Vue from 'vue'
// 引入 index.js
import laoyanUi from '../packages';
Vue.use(laoyanUi)

再把 App.vue 中的引入和注册组件删除

<template>
  <div id="app">
    <ly-link type="primary"> 老严 test </ly-link>
  </div>
</template>

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

这样还是没问题的对吧！

那么需要来了，用户当初须要按需引入组件，怎么做？

什么按需引入，给我打!

好，咱们来到了按需引入这个环节

咱们平时用多了市面上的 UI 组件库，会发现个别都会有个按需引入

比方 element-ui

import {Button, Select} from 'element-ui'

那么该如何达到按需引入的成果呢？

在对应的组件文件夹中，再写上一个 index.js

// 引入组件
import lyLink from './src';

// 提供 install 装置办法，供按需引入
lyLink.install = function (Vue) {
    // 注册组件
    Vue.component(lyLink.name, lyLink)
}
// 裸露组件
export default lyLink

此时你的 packages 应该长这样

而后咱们再去到里面 packages\index.js

将引入的 vue 文件改为引入 index.js, 再默认裸露 install

// 引入刚刚写的组件内的 index.js
+ import lyLink from './lyLink'
const components = [lyLink]

// 定义 install 办法，接管 Vue 作为参数。如果应用 use 注册插件，则所有的组件都将被注册
const install = function (Vue,opt = {}) {
    // 判断是否装置
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => {Vue.component(component.name, component)
    })
}

+ export default install

+ export {// 导出的对象必须具备 install，能力被 Vue.use() 办法装置
    install,
    // 以下是具体的组件列表
    lyLink
}

按需引入试试吧

import {lyLink} from '../packages';
Vue.use(lyLink)

成果也是能够的

咱们每次做我的项目优化的时候都有一个 cdn 优化，那么这个 cdn 引入，咱们改怎么配置呢？

  import lyLink from './lyLink'
  const components = [lyLink]

  // 定义 install 办法，接管 Vue 作为参数。如果应用 use 注册插件，则所有的组件都将被注册
  const install = function (Vue,opt = {}) {
      // 判断是否装置
      if (install.installed) return
      // 遍历注册全局组件
      components.map(component => {Vue.component(component.name, component)
      })
  }

+ // 判断是否是间接引入文件
+ if (typeof window !== 'undefined' && window.Vue) {+     install(window.Vue)
+ }

  export default install

  export {// 导出的对象必须具备 install，能力被 Vue.use() 办法装置
      install,
      // 以下是具体的组件列表
      lyLink
  }

多加这一层判断即可，严老湿咱们怎么上传 cdn 呐？咱们在前面会讲这个如何应用

怎么打包？yarn build? 那不是打包我的项目了嘛

咱们须要在 package.json 中加上一条新的命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
+    "lib": "vue-cli-service build --target lib --name index --dest lib packages/index.js"
},

这条命令会将咱们的组件的打包到一个 lib 的文件夹中

yarn lib

打包实现之后咱们试试引入 lib 文件夹中的组件

在 main.js 中引入

import Vue from 'vue'
import App from './App.vue'
import {lyLink} from '../lib/index.umd.min.js';
Vue.use(lyLink)
Vue.config.productionTip = false

new Vue({render: h => h(App),
}).$mount('#app')

启动我的项目

yarn serve

咱们曾经胜利解析了组件。然而发现了一个问题，咱们如同没有款式

因为咱们还没有引入款式

  import Vue from 'vue'
  import App from './App.vue'
  import {lyLink} from '../lib/index.umd.min.js';
+ import '../lib/index.css'
  Vue.use(lyLink)
  Vue.config.productionTip = false

  new Vue({render: h => h(App),
  }).$mount('#app')

这下算是实现了吧，那咱们应该要公布组件了吧？

不然咱们怎么提供给他人应用呢，个别就是上传 npmjs

公布组件咱们个别会公布到 npm 上, 而后就能够通过 yarn 或者 cnpm 下载了

然而咱们须要创立一个.npmignore 文件来疏忽上传一部分文件，比方测试文件examples, 咱们没必要上传, 这样会减少包的体积

# 疏忽目录
examples/
packages/
public/
dist/
common/

# 疏忽指定文件
vue.config.js
babel.config.js
*.map

好了咱们接下来能够进行上传 npm 包了

npm login

咱们登陆胜利了！那么接下来

公布包之前你还须要做一件事件

将你的 package.json 中的 private 改为 false ，这个是用来示意这个包是否为公有的

- "private": true,
+ "private": false,

批改入口文件为 lib 上面的 js，不然到时候下载依赖找不到你的组件

"main": "lib/index.umd.min.js",

执行公布

npm publish

公布包有很多疑难杂症，心愿你能够顺利百度谷歌到，这里我就不一一阐明了

你能够从新创立一个 vue-cli 来下载你的依赖包

yarn add laoyan-ui

下载实现之后, 在 main.js 中引入

import {lyLink} from 'laoyan-ui'
import 'laoyan-ui/lib/index.css'
Vue.use(lyLink)

轻易找个页面测试一下吧

<ly-link type="primary" href="//lovemysoul.vip/votre-dieu">test link</ly-link>

到这里咱们就曾经实现了 UI 组件库的大部分流程

然而咱们之前说的 cdn 引入呢？

咱们间接新建一个 index.html，这个 https://unpkg.com 你就能够了解为 npm 自带的 cdn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test laoyan-ui</title>
    <!-- 引入 vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.min.js"></script>
    <!-- 引入 laoyan-ui 的组件 -->
    <script src="https://unpkg.com/laoyan-ui/lib/index.umd.min.js"></script>
    <!-- 引入 laoyan-ui 的款式 -->
    <link rel="stylesheet" href="https://unpkg.com/laoyan-ui/lib/index.css">
</head>
<body>
    <div id="app">  
        <ly-link type="primary"> test laoyan-ui </ly-link> 
    </div>
    <script>
        let vm = new Vue({el:"#app"})
    </script>
</body>
</html>

留神：生产环境，举荐在引入 cdn 时加上版本号如：//unpkg.com/laoyan-ui@0.1.0@0.1.0 就是锁定版本号，这样能够锁定你引入的版本，保障稳定性

咱们的明天的课程就到这里，当初将近凌晨一点钟，该睡觉了

如果你感觉这篇文章讲得还算不错，能够给我点个赞哈哈，收割一波

如果本篇文章有什么谬误，请您大胆提出，老严也会及时批改

最近在做的 GitHub 我的项目地址是：https://github.com/votre-dieu…

欢送 PR、Star、Fock

如果你要咱们刚刚一起写的这个代码，能够点击下方链接百度云盘进行下载

链接: https://pan.baidu.com/s/1puYN…

明码: 4n6v

关于vue.js:真正的手摸手带你实现-vuejs-组件库

前言

前提

创立一个 vue 的我的项目

批改文件名称

新建 packages

批改 src

新建 vue.config.js

清理不须要的内容

目录构造截图

启动我的项目

开始干活

写一个文本链接

创立 index.js

按需引入

cdn 引入

打包组件库

执行打包

试试成果

公布组件

创立.npmignore

登陆 npm

公布包

装置依赖

引入

成果

cdn 应用

最初

代码地址