A VUE component library that implements code and effects only by maintaining Markdown documents

isui-vue

A high quality UI Toolkit, A Component Library for vue 2.0. 💘

The document

Visit the nodedai.com/isui-vue website for more information.

conceived

To borrowisuiThe idea of maintaining markdown documentation is to realize the code and effects of vUE components

Problems faced

Maintain MD documentation with a set of code for code replication and instances
Select code highlight
Package by component
I want to write it with iView
There are too many iView components and it is too slow and tiring to transfer from page to markdown document

The solution

Use VUE-CLI to quickly build projects
Basic reference ISUI project directory structure and style
Use the iView style and writing method for components (pay attention to details later)
Use vue-markdown, vue-marked-loader, text-loader and other components to process MD files
If you don’t want to copy, use node, FS to read and write
Cheerio was used to parse HTML, and the general table was converted into Markdown

preview

The installation

npm install isui-vue --save
Copy the code

Introducing isui – vue

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import isui from 'isui-vue';
Vue.use(VueRouter);
Vue.use(isui);
Copy the code

On-demand reference

With the plug-in babel-plugin-import, you can load components on demand and reduce file size. First install and configure it in the file.babelrc:

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "isui-vue",
    "libraryDirectory": "src/components"
  }]]
}
Copy the code

The volume can then be reduced by introducing components as needed:

import { Button, Table } from 'isui-vue';
Vue.component('Button', Button);
Vue.component('Table', Table);
Copy the code

build

Download git clone / / https://github.com/shawn2016/isui-vue.git / / install dependencies NPM install/run # 8080 NPM start / / build NPM run buildCopy the code

The directory structure

├ ─ ─ dist # generated document static file directory ├ ─ ─ docs # document source file | -- - ├ ─ ─ locales | ├ ─ ─ md md source file | ├ ─ ─ node md generator | └ ─ ─ pages vue page ├ ─ ─ Package. json ├─ examples ├─ SRC # VueCopy the code

Thank you

This component library is modified based on iview, thank you!

License

Licensed under the MIT License.