创建前端组件库

836
默认分类

开始搭建组件库

做组件库的意义
组件设计的基本原理
通用性 易用性 可通性

搞坏了四个项目后，终于搭建好了我的组件库的第一版本。
玩坏的项目中，各种各样的错误提示都有，这时候，千万不要慌。
第一，检查下，所有的代码是否合乎规范，比如，引号内是不是多了个空格，再比如，你的babel-core和babel-loader还是啥玩意儿的，版本是否同级，所谓同级就是，一个7.x,一个8.x，这俩就是不同级，可能会出现bug。这时候，不要慌，要不删了这俩东西。要不就调整其中一个到另一个的版本级别就ok了。

这里面，先确保你的电脑中已经安装了npm,vue这些东西。

第一步 新建一个项目，在一个文件夹中打开cmd执行以下命令，项目名字，自己爱好咯
  1. vue create XXX-ui
第二步，新建项目后，会发现并没有网上那些文章里面说的有vue.config.js。确实是没有的，所以这里需要自己新建一个文件，vue.config.js，里面具体是要写关于文件的一些配置。如果还想做其他配置，可自行修改。

关于src文件夹，也可自行命名为examples，看个人爱好，添加一个packages文件夹。后续用于添加组件。

  1. const path = require("path");
  2. module.exports = {
  3.   // 修改默认的入口
  4.   pages: {
  5.     index: {
  6.       entry: "src/main.js",
  7.       template: "public/index.html",
  8.       filename: "index.html"
  9.     }
  10.   },
  11.   chainWebpack: config => {
  12.     // vue默认@指向src目录，这里要修正为src，另外新增一个~指向packages
  13.     config.resolve.alias
  14.       .set("@", path.resolve("src"))
  15.       .set("~", path.resolve("packages"));
  16.     // lib目录是组件库最终打包好存放的地方，不需要eslint检查
  17.     // src/docs是存放md文档的地方，也不需要eslint检查
  18.     config.module
  19.       .rule("eslint")
  20.       .exclude.add(path.resolve("lib"))
  21.       .end()
  22.       .exclude.add(path.resolve("src/docs"))
  23.       .end();
  24.     // packages和src目录需要加入编译
  25.     config.module
  26.       .rule("js")
  27.       .include.add(/packages/)
  28.       .end()
  29.       .include.add(/src/)
  30.       .end()
  31.       .use("babel")
  32.       .loader("babel-loader")
  33.       .tap(options => {
  34.         // 修改它的选项...
  35.         return options;
  36.       });
  37.   }
  38. };
第三步，进入项目文件夹，cmd执行npm run serve，这个命令是初始化时默认的，也可以换成npm run dev,当然，在package.json里面可以自行修改。看个人喜好。启动，开始在packages中新建组件。

以message为例（仅供测试，所以先建一个最简单的例子就好。）
以下为packages文件夹下的文件目录。

以下为各个文件的内容，可供参考

packages/message/src/message.vue

  1. <template>
  2.   <div class="message">
  3.     您好，{{message}}
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'v-message',    // 申明组件的 name属性
  10.   props: {
  11.     message: String
  12.   }
  13. }
  14. </script>

/packages/message/index.js

  1. import message from './src/message'
  3. message.install = function (Vue) {
  4.   Vue.component(message.name, message )
  5. }
  7. export default message

/packages/index.js

  1. // 导入组件
  2. import message from './message'
  4. // 存储组件列表
  5. const components = [
  6.   message
  7. ]
  9. // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
  10. const install = function (Vue) {
  11.   // 判断是否安装
  12.   if (install.installed) return
  13.   // 遍历注册全局组件
  14.   components.map(component => Vue.component(component.name, component))
  15. }
  17. // 判断是否是直接引入文件
  18. if (typeof window !== 'undefined' && window.Vue) {
  19.   install(window.Vue)
  20. }
  22. export default {
  23.   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  24.   install,
  25.   // 以下是具体的组件列表
  26.   message
  27. }
第四步 新建完一个组件后，需要发布到npm上面，我们才能用。首先，我们需要通过npm run lib 把我们的项目打包至lib文件夹中。lib这个命令需要添加到package.json中。

下面的XXX均为你自己命名。

  1.   "name": "XXX-ui", // 此处换为你自己的ui的名称即可，避免冲突，可以提前在npm的仓库里搜索一下
  2.   "version": "0.1.3",
  3.   "main": "lib/XXX-ui.umd.min.js",
  4.   "description": "XXX-ui",
  5.   "keyword": "XXX-ui",
  6.   "author":"XXX",
  7.   "private": false,
  8.   "scripts": {
  9.     "serve": "vue-cli-service serve",
  10.     "build": "vue-cli-service build",
  11.     "lint": "vue-cli-service lint",
  12.     "lib": "vue-cli-service build --target lib --name XXX-ui --dest lib packages/index.js"
  13.   },
第五步，截至此时，我们的代码已经初步告一段落。如果你还未注册npm的账号，那就先去注册一个账号。如果注册好了，打开cmd，执行npm login,输入你自己的账号密码。而后，npm publish，发布你的组件库。发布完成后，可在npm中搜索到你的组件库。ok,一个组件库，从开始到上传完毕。接下来最重要的一点。不能遗漏。试一下你的组件是否能用，这很关键。
第六步 新建一个项目，在项目中使用我刚刚上传的组件库。
  1. npm i —save-dev XXX-ui
  2. 在项目的主文件main.js中 
  1. import XXX from 'musuixin-ui'
  2. Vue.use(XXX)
  1. 找一个demo文件
  1. <v-message message="Miya" />

根据我的组件，出来的应该是
您好，Miya

结语

开心，终于把这整个过程走完，并且走通了。在这个过程中遇到了几个问题，好在也都解决了。
简单的搭建已经完成了，后续组件的按需加载，以及组件的扩充，继续加油。

本文链接：

https://www.calm7.com/article.html?id=2