脚本宝典收集整理的这篇文章主要介绍了

造轮子:写vue组件库orange-ui

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

项目搭建

项目效果地址

项目搭建参考 从零开始搭建 Vue 组件库 VV-UI

项目地址

记录模仿 VV-UI 组件库造轮子中遇到的问题,以及解决方案

新建项目

对于脚手架环境的问题,目前已经有非常成熟的 vue 官方的脚手架,我们拿来用就好了

npm install vue-cli -g vue init webpack origin-ui cd origin-ui npm install npm run dev

项目可以正常启动,在此基础上进行改造

更改目录

|-- examples            // 原 src 目录,改成 examples 用作示例展示   |-- assets            // api文档logo 样式文件   |-- docs              // api文档   |-- router            // api文档路由 |-- packages            // 新增 packages 用于编写存放组件   |-- button            // 组件   |-- theme-default     // 组件样式 gulp 运行目录   |-- lib               // 编译后css   |-- src               // 编译前css   |-- gulpfile.js       // gulp 写打包css的task   |-- salad.config.json // BEM的配置文件   |-- index.js          // 导出组件 

原 src 目录,改成 examples 用作示例展示,需要对应修改 webpack 配置

把原先的编译指向 src 的目录改成 examples

{   test: /.(js|vue)$/,   loader: 'eslint-loader',   include: [resolve('examples'), resolve('test'), resolve('packages')],// 修改 } entry: {   app: './examples/main.js' // 程序入口修改 }, resolve: {   alias: {     vue$: 'vue/dist/vue.esm.js',     '@': resolve('examples') // 根据实际情况修改   } },

如何编写文档

使用vue-markdown-loader在 vue 下可以去写 markdown 文档

安装

# For Vue2 npm i vue-markdown-loader -D npm i  vue-loader vue-template-compiler -D

使用

webpack.config.js file:

module.exports = {   module: {     rules: [       {         test: /.md$/,         loader: 'vue-markdown-loader'       }     ]   } }

在 example/docs 目录下新建 test.md

同时创建一个新的路由,指向我们的 md 文件:

{   path: '/test',   name: 'test',   component: r => require.ensure([], () => r(requi('../docs/test.md'))) }

打开浏览器访问http://localhost:8080/#/test

实现 demo/代码演示

  • 需求 1 就是拦截 import,并且解析 markdowm 语法
  • 需求 2 在析 markdown 中也可以写 Vue 的组件

全部配置可参考Vue 加载 Markdown 格式组件有详细注释

markdown-it,支持 options 选项。这样我们就可以为我们的 markdown 定义独特的标识符,这里我用 demo 标识需要显示代码块的地方,所以我需要配置 options 选项 :