组件库开发小记（五）网站搭建

Gypsophlia
1,033 阅读4分钟

组件库网站搭建

市面上有很多静态网站的框架，但是由于我们用Vue编写，那么非常推荐直接使用Vuepress，虽然它在使用上存在一定的问题，但是对展示Vue组件非常有利，可以直接引入。

起步

第一步你需要学会使用Markdown的语法

第二步你需要自行阅读官方网站 （除了碰到BUG，否则不推荐先阅读别人整理过的文章）

第三步你需要掌握以下几点：

  • 安装并启动基础项目

    • 如果你启动项目不成功，可以先看实践中的如何启动项目。

  • 了解该框架目录结构

  • 了解该框架配置结构

实践

接下来的内容默认你已经掌握以上内容，我会从特例出发，来分享我碰到的坑和Trick。

如何修改全局样式

这里全局样式包括两部分，一部分属于Vuepress自带的全局主题，另外一部分属于自定义的全局样式。在官方网站中将它分为两个文件：index.styl和palette.styl，二者属于styl语法，可以网址小学一下，上手非常快。

  • palette.styl可覆盖默认主题的样式，如颜色从绿色变成紫色。

  • index.styl可配置全局自定义的样式。

为何启动项目报错

这里我非常，非常，非常需要强调：

由于我个人使用的是Vue2，在启动的时候会报错webpack-server中某个模块的错误，这是由于vuepress使用的webpack版本较低(v5以下)，而vue2默认使用的版本高，二者依赖的模块中子模块有差异。

解决方法其实就是让版本一致即可，个人给出两种方法：

  • vuepress项目另建仓库或分支，不要与vue2同目录（正在使用）

  • 采用monorepo进行包管理，各自用各自（将来改造）

如何引入组件库

在这里组件库应该和你的网站是分离的状态，因此你可以直接通过npm install安装你已经发布或者npm link的组件库，并且在enhanceApp.js中引入。相关资料见此。

按照正常思路进入，如下，可以在测试环境下运行成功：

import "@gypsophlia/create-ui/lib/theme/index.css";
import CreateUI from "@gypsophlia/create-ui";

export default ({ Vue }) => {
  Vue.use(CreateUI); // global register
};

但是你会发现打包时总是报错，这是因此vuepress是静态网站生成器，采用 Node.js 服务端打包，而我们生成的包只能在浏览器或客户端中正常访问，查阅多方资料得知，应该进行如下改造：

import "@gypsophlia/create-ui/lib/theme/index.css";

export default ({ Vue, isServer }) => {
  // resolve the SSR problem in Node
  if (!isServer) {
    import("@gypsophlia/create-ui").then((CreateUI) => {
      Vue.use(CreateUI); // global register
    });
  }
};

看完代码想明白了吗？

如何部署项目页面

打包的时候有可能在本地无法正常显示页面，这是路径导致的。

请你在.vuepress/config.js中自行配置base属性，这个属性即为你的后缀，那么你如何正确配置它呢？

我们以部署到github-pages为例，你可以按照官方网站的脚本来部署到你的github上部署 | VuePress 中文文档，在部署之后你的网站地址应该像我这里mrpluto0.github.io/CreateUI/，看到了吗域名后缀为CreateUI这是由你的仓库名字所决定，因此base就应该填写/CreateUI/，你可以多次尝试。

如何组件嵌入Markdown

这里属于一个小Trick了，因为如果你按照一般的方法来展示组件和组件的代码，二者必定是分离的，也就是说组件的show和组件的source code是分开的。

但是如果你想定制，很美观的展示代码和组件该怎么办呢？

当时传入字符串是个办法，然而它的格式问题真的令人头疼，比较费时费力。

那就用到匿名插槽（我尝试过具名插槽是不行的）来插入markdown语法来展示组件，如下是效果图：

image.png

那么代码长这个样子：

<com-show>
  ```html
  <ct-chatbox
    :text="['早上好呀']"
    name="Gypsophlia"
    stamp="3 minutes ago"
    avatar="https://avatars.githubusercontent.com/u/54534553?v=4"
    bgColor="skyblue"
  ></ct-chatbox>
  省略...
  ```
  <template v-slot:show>  
    <ct-chatbox
      :text="['早上好呀']"
      name="Gypsophlia"
      stamp="3 minutes ago"
      avatar="https://avatars.githubusercontent.com/u/54534553?v=4"
      bgColor="skyblue"
    ></ct-chatbox>
    <!-- 省略 -->
  </template>
</com-show>

总结

以上仅仅属于你在完成一个静态页面时，碰到的部分问题和功能的冰山一角，仍然有更多的工具值得去探索。

这个组件库的开发到这里流程已经走完了，似乎东西不多，似乎东西又很多，然而值得说明的是，我们需要从中掌握到方法，工具是人来用的，换个一样的工具还是得会用才行。

这之后我会专门再写一篇文章来对比纯使用webpack和使用vue所带的webpack所带来的差别：包括功能上、打包体积上等。

avatar
文章
阅读
粉丝