创建前端组件库

开始搭建组件库

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

搞坏了四个项目后,终于搭建好了我的组件库的第一版本。
玩坏的项目中,各种各样的错误提示都有,这时候,千万不要慌。
第一,检查下,所有的代码是否合乎规范,比如,引号内是不是多了个空格,再比如,你的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>
  6. <script>
  7. export default {
  8. name: 'v-message', // 申明组件的 name属性
  9. props: {
  10. message: String
  11. }
  12. }
  13. </script>

/packages/message/index.js

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

/packages/index.js

  1. // 导入组件
  2. import message from './message'
  3. // 存储组件列表
  4. const components = [
  5. message
  6. ]
  7. // 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
  8. const install = function (Vue) {
  9. // 判断是否安装
  10. if (install.installed) return
  11. // 遍历注册全局组件
  12. components.map(component => Vue.component(component.name, component))
  13. }
  14. // 判断是否是直接引入文件
  15. if (typeof window !== 'undefined' && window.Vue) {
  16. install(window.Vue)
  17. }
  18. export default {
  19. // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
  20. install,
  21. // 以下是具体的组件列表
  22. message
  23. }
第四步 新建完一个组件后,需要发布到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