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

43次阅读

共计 6264 个字符，预计需要花费 16 分钟才能阅读完成。

前言

如何做一个 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

启动实现，关上浏览器

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

开始干活

咱们所有的组件放在 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 中来，咱们通过 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 优化，那么这个 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

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

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

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

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

登陆 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 引入呢？

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

正文完
javascript
发表至： javascript
2021-03-31
 0
关于javascript:7个杀手级的JS一行代码
JavaScript流程控制语句switch语句十二
关于javascript:没有实践系列浏览器的强缓存和协商缓存
关于javascript:前端面试每日-31-第595天