├── examples
    ├── docs
    │   ├── index.md
    │   └── input-demo.vue
    ├── assets
    │   ├── logo.png
    │   ├── main.css
    │   └── main.less
    ├── components
    │   ├── navs
    │   │   ├── index.js
    │   │   ├── navs.css
    │   │   ├── navs.less
    │   │   ├── navs.js
    │   │   └── navs-item.js
    │   ├── demo-block
    │   │   ├── index.js
    │   │   ├── demo-block.less
    │   │   ├── demo-block.css
    │   │   └── demo-block.vue
    │   ├── main-footer.vue
    │   └── main-header.vue
    ├── views
    │   ├── docs.vue
    │   ├── live-demo.vue
    │   └── home.vue
    ├── router.js
    ├── App.vue
    └── main.js
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── index.js
    ├── input.vue
    └── input.less
├── .gitignore
├── .github
    └── workflows
    │   └── docs-deploy-to-gh-pages.yml
├── LICENSE
├── README.md
├── package.json
└── vue.config.js


/examples/docs/index.md:
--------------------------------------------------------------------------------
1 | # Input
2 | 
3 | > 这是一个编写文档例子
4 | 
5 | [demo:vue](./input-demo.vue)
6 | 
7 | ----


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mengdu/vue-component-devtool/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mengdu/vue-component-devtool/HEAD/examples/assets/logo.png


--------------------------------------------------------------------------------
/examples/components/navs/index.js:
--------------------------------------------------------------------------------
1 | import VNavs from './navs'
2 | import './navs.less'
3 | 
4 | export default VNavs
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import MInput from './input'
 2 | import './input.less'
 3 | 
 4 | MInput.install = function (Vue) {
 5 |   Vue.component(MInput.name, MInput)
 6 | }
 7 | 
 8 | export {
 9 |   MInput as default,
10 |   MInput
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/views/docs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <DocIndex />
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import DocIndex from '../docs/index.md'
 8 | 
 9 | export default {
10 |   components: { DocIndex }
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/examples/views/live-demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <InputDemo />
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import InputDemo from '../docs/input-demo'
 8 | 
 9 | export default {
10 |   components: { InputDemo }
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/examples/components/demo-block/index.js:
--------------------------------------------------------------------------------
1 | import DemoBlock from './demo-block'
2 | import './demo-block.css'
3 | 
4 | DemoBlock.install = function (Vue, options = {}) {
5 |   Vue.component(options.name || 'DemoBlock', DemoBlock)
6 | }
7 | 
8 | export default DemoBlock
9 | 


--------------------------------------------------------------------------------
/examples/docs/input-demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <m-input placeholder="输入框" v-model="value"/><span>{{value}}</span>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | 
 8 | 
 9 | export default {
10 |   data () {
11 |     return {
12 |       value: ''
13 |     }
14 |   }
15 | }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/examples/components/demo-block/demo-block.less:
--------------------------------------------------------------------------------
 1 | .m-demo-block {
 2 |   border: solid 1px #d7e2ea;
 3 |   border-radius: 3px;
 4 |   margin-bottom: 15px;
 5 | 
 6 |   .demo {
 7 |     padding: 15px;
 8 |   }
 9 |   .code {
10 |     border-top: solid 1px #d7e2ea;
11 | 
12 |     pre {
13 |       margin-bottom: 0;
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /docs
 5 | 
 6 | *-md.vue
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/examples/components/demo-block/demo-block.css:
--------------------------------------------------------------------------------
 1 | .m-demo-block {
 2 |   border: solid 1px #d7e2ea;
 3 |   border-radius: 3px;
 4 |   margin-bottom: 15px;
 5 | }
 6 | .m-demo-block .demo {
 7 |   padding: 15px;
 8 | }
 9 | .m-demo-block .code {
10 |   border-top: solid 1px #d7e2ea;
11 | }
12 | .m-demo-block .code pre {
13 |   margin-bottom: 0;
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/views/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="readme">
 4 |       <div class="title">README.md</div>
 5 |       <div class="content"><Readme /></div>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | <script>
10 | import Readme from '../../README.md'
11 | 
12 | export default {
13 |   components: {
14 |     Readme
15 |   }
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/examples/components/main-footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main-footer">
 3 |     <div class="main-container">
 4 |       <div class="line"></div>
 5 |       <ul class="nav-list">
 6 |         <li>&copy;2020 {{$root.pkg.author.name}}</li>
 7 |         <li><a :href="$root.pkg.github">Github</a></li>
 8 |         <li><a :href="$root.pkg.website">About me</a></li>
 9 |       </ul>
10 |     </div>
11 |   </div>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/examples/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | const router = new VueRouter({
 7 |   mode: 'hash',
 8 |   routes: [
 9 |     { path: '/', component: () => import('./views/home') },
10 |     { path: '/live-demo', component: () => import('./views/live-demo') },
11 |     { path: '/docs', component: () => import('./views/docs') }
12 |   ]
13 | })
14 | 
15 | export default router
16 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <MainHeader />
 4 |     <div class="main-container"><router-view /></div>
 5 |     <MainFooter />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import MainHeader from './components/main-header'
11 | import MainFooter from './components/main-footer'
12 | 
13 | export default {
14 |   name: 'app',
15 |   components: {
16 |     MainHeader,
17 |     MainFooter
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/examples/components/demo-block/demo-block.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="m-demo-block">
 3 |     <div class="demo"><slot></slot></div>
 4 |     <div class="code" v-if="!params.hideCode"><slot name="code"></slot></div>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     data: Object,
12 |     params: {
13 |       type: Object,
14 |       default () {
15 |         return {}
16 |       }
17 |     }
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/.github/workflows/docs-deploy-to-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: GitHub Actions Build docs and deploy
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - master
 6 | jobs:
 7 |   build-and-deploy:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |     - name: Checkout
11 |       uses: actions/checkout@master
12 | 
13 |     - name: Build and Deploy
14 |       uses: JamesIves/github-pages-deploy-action@master
15 |       env:
16 |         ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
17 |         BRANCH: gh-pages
18 |         FOLDER: docs # 部署文件夹内容
19 |         BUILD_SCRIPT: npm install && npm run build:docs
20 | 


--------------------------------------------------------------------------------
/examples/components/navs/navs.css:
--------------------------------------------------------------------------------
 1 | .v-navs {
 2 |   list-style: none;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   font-size: 14px;
 6 | }
 7 | .v-navs .v-navs-item {
 8 |   display: inline-block;
 9 |   color: #323b44;
10 | }
11 | .v-navs .v-navs-item + .v-navs-item {
12 |   margin-left: 10px;
13 | }
14 | .v-navs .v-navs-item a {
15 |   text-decoration: none;
16 |   color: inherit;
17 | }
18 | .v-navs .v-navs-item a.router-link-exact-active {
19 |   color: #768594;
20 | }
21 | .v-navs .v-navs-item--label {
22 |   padding: 0 10px;
23 |   font-weight: 600;
24 | }
25 | .v-navs .v-navs-item:hover {
26 |   color: #3798f9;
27 | }
28 | 


--------------------------------------------------------------------------------
/examples/components/navs/navs.less:
--------------------------------------------------------------------------------
 1 | .v-navs {
 2 |   list-style: none;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   font-size: 14px;
 6 | 
 7 |   .v-navs-item {
 8 |     display: inline-block;
 9 |     color: #323b44;
10 | 
11 |     & + .v-navs-item {
12 |       margin-left: 10px;
13 |     }
14 | 
15 |     a {
16 |       text-decoration: none;
17 |       color: inherit;
18 |     }
19 |     a.router-link-exact-active {
20 |       color: #768594;
21 |     }
22 | 
23 |     &--label {
24 |       padding: 0 10px;
25 |       font-weight: 600;
26 |     }
27 | 
28 |     &:hover {
29 |       color: #3798f9;
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-component</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-component doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |   <input type="text" class="m-form-control" :placeholder="placeholder" v-model="val">
 4 | </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: 'MInput',
 9 |   props: {
10 |     value: String,
11 |     placeholder: String
12 |   },
13 |   data () {
14 |     return {
15 |       val: ''
16 |     }
17 |   },
18 |   watch: {
19 |     value (val) {
20 |       if (val !== this.val) {
21 |         this.val = val
22 |       }
23 |     },
24 |     val () {
25 |       if (this.value !== this.val) {
26 |         this.$emit('input', this.val)
27 |       }
28 |     }
29 |   },
30 |   created () {
31 |     this.val = this.value
32 |   }
33 | }
34 | </script>
35 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import DemoBlock from './components/demo-block'
 4 | import router from './router'
 5 | import Component from '../src'
 6 | import pkg from '../package.json'
 7 | import 'vue-dotmd-loader/dist/css/default.css'
 8 | import 'github-markdown-css/github-markdown.css'
 9 | import 'highlight.js/styles/color-brewer.css'
10 | import './assets/main.less'
11 | 
12 | Vue.use(DemoBlock)
13 | Vue.use(Component)
14 | 
15 | Vue.config.productionTip = false
16 | 
17 | const app = new Vue({
18 |   render: h => h(App),
19 |   router,
20 |   data () {
21 |     return {
22 |       pkg: pkg
23 |     }
24 |   }
25 | }).$mount('#app')
26 | 
27 | window.app = app
28 | 


--------------------------------------------------------------------------------
/examples/components/main-header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="main-header">
 3 |     <div class="main-container clearfix">
 4 |       <div class="f-left"><navs :menus="navs"/></div>
 5 |       <div class="f-right"><navs :menus="outside" /></div>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | <script>
10 | import Navs from './navs'
11 | 
12 | export default {
13 |   components: { Navs },
14 |   data () {
15 |     return {
16 |       navs: [
17 |         { label: 'Home', router: '/' },
18 |         { label: 'Live Demo', router: '/live-demo' },
19 |         { label: 'Docs', router: '/docs' },
20 |       ],
21 |       outside: [
22 |         { label: 'Github', link: this.$root.pkg.github },
23 |         { label: 'About', link: this.$root.pkg.website }
24 |       ]
25 |     }
26 |   },
27 |   created () {
28 | 
29 |   }
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/examples/components/navs/navs.js:
--------------------------------------------------------------------------------
 1 | import NavItem from './navs-item'
 2 | 
 3 | export default {
 4 |   name: 'VNavs',
 5 |   components: { NavItem },
 6 |   props: {
 7 |     menus: {
 8 |       type: Array,
 9 |       default () {
10 |         return []
11 |       }
12 |     },
13 |     currentActive: {
14 |       type: Array,
15 |       default () {
16 |         return []
17 |       }
18 |     }
19 |   },
20 |   data () {
21 |     return {
22 |       actives: []
23 |     }
24 |   },
25 | 
26 |   watch: {
27 |     currentActive (v) {
28 |       this.actives = [...v]
29 |     }
30 |   },
31 | 
32 |   created () {
33 |     this.actives = [...this.currentActive]
34 |   },
35 |   // eslint-disable-next-line no-unused-vars
36 |   render (h) {
37 |     return (
38 |       <ul class="v-navs">
39 |         {this.menus.map(e => {
40 |           return <NavItem menu={e}/>
41 |         })}
42 |       </ul>
43 |     )
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 蓝月萧枫
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-component-devtool
 2 | 
 3 | > 通过 [vue-cli](https://cli.vuejs.org) 初始化；采用 [vue-dotmd-loader](https://github.com/mengdu/vue-dotmd-loader) 来加载文档。
 4 | 
 5 | 
 6 | 基于 webpack 的 Vue 组件开发工具。可以编写例子，文档。
 7 | 
 8 | 
 9 | **use**
10 | 
11 | ```ls
12 | git clone https://github.com/mengdu/vue-component-devtool my-component
13 | ```
14 | 
15 | **安装依赖**
16 | 
17 | ```ls
18 | yarn
19 | # or
20 | npm install
21 | ```
22 | 
23 | **功能**
24 | 
25 | + 打包vue组件，导出 `umd` 模式
26 | + 支持 `markdown` 解析
27 | + `markdwon` 可以编写编写vue例子
28 | 
29 | 
30 | **目录**：
31 | 
32 | ```text
33 | ├─build 开发工具
34 | ├─docs 打包后的文档
35 | ├─dist 打包后库
36 | │  ├─index.umd.js
37 | │  └─index.css
38 | ├─src 组件源码
39 | ├─examples 文档源码
40 | ```
41 | 
42 | 
43 | 
44 | **开发模式**（支持热更新）
45 | 
46 | ```ls
47 | npm run dev
48 | ```
49 | 
50 | 打开 `http://localhost:8080` 查看效果。
51 | 
52 | 
53 | **打包组件**
54 | 
55 | ```ls
56 | npm run build:lib
57 | ```
58 | 
59 | 打包后组件被打包成js和css在 `dist` 文件夹中。
60 | 
61 | **生成文档**
62 | 
63 | ```ls
64 | npm run build:docs
65 | ```
66 | 
67 | 生成文档在 `docs` 文件夹，打开 `index.html` 可以浏览。上传 Github 后可以开启项目 Page 访问。
68 | 
69 | ## Other
70 | 
71 | [vue-dotmd-loader](https://github.com/mengdu/vue-dotmd-loader)
72 | 
73 | -----
74 | 


--------------------------------------------------------------------------------
/examples/components/navs/navs-item.js:
--------------------------------------------------------------------------------
 1 | export function isFun (v) {
 2 |   return Object.prototype.toString.call(v) === '[object Function]'
 3 | }
 4 | 
 5 | function renderItemLabel (ctx, menu) {
 6 |   if (isFun(menu.label)) {
 7 |     return menu.label(menu)
 8 |   } else if (ctx.$parent.$scopedSlots.item) {
 9 |     return ctx.$parent.$scopedSlots.item(menu)
10 |   } else if (isFun(ctx.$parent.renderItem)) {
11 |     return ctx.$parent.renderItem(menu)
12 |   }
13 | 
14 |   return menu.label
15 | }
16 | 
17 | export default {
18 |   props: {
19 |     menu: Object
20 |   },
21 |   // eslint-disable-next-line no-unused-vars
22 |   render (h) {
23 |     const menu = this.menu
24 |     const label = <div class="v-navs-item--label">{renderItemLabel(this, menu)}</div>
25 | 
26 |     let item = null
27 | 
28 |     if (menu.link) {
29 |       item = (
30 |         <a href={menu.link} target={menu.target} title={menu.title}>
31 |           {[label]}
32 |         </a>
33 |       )
34 |     } else if (menu.router) {
35 |       item = (
36 |         <router-link to={menu.router} title={menu.title}>
37 |           {[label]}
38 |         </router-link>
39 |       )
40 |     } else {
41 |       item = [label]
42 |     }
43 | 
44 |     return (
45 |       <li class="v-navs-item">{item}</li>
46 |     )
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/input.less:
--------------------------------------------------------------------------------
 1 | .m-form-control{
 2 |   display: inline-block;
 3 |   padding: 5px 12px;
 4 |   font-size: 14px;
 5 |   font-family: inherit;
 6 |   line-height: 1.42857143;
 7 |   height: 36px;
 8 |   color: #555;
 9 |   background-color: #fff;
10 |   background-image: none;
11 |   border: 1px solid #c5c7ce;
12 |   border-radius: 4px;
13 |   vertical-align: middle;
14 |   outline: none;
15 |   -webkit-box-sizing: border-box;
16 |           box-sizing: border-box;
17 |   -webkit-box-shadow: 0 0 0 0 rgba(44,147,250,.18);
18 |           box-shadow: 0 0 0 0 rgba(44,147,250,.18);
19 |   -webkit-transition: border,-webkit-box-shadow .5s ease;
20 |   transition: border,-webkit-box-shadow .5s ease;
21 |   transition: border,box-shadow .5s ease;
22 |   transition: border,box-shadow .5s ease,-webkit-box-shadow .5s ease;
23 | }
24 | .m-form-control:active{
25 |   border-color: #29a0f2;
26 | }
27 | .m-form-control:focus{
28 |   border-color: #29A0F2;
29 |   /* box-shadow: 0 0 0px 3px rgba(44, 147, 250, 0.18); */
30 | }
31 | .m-form-control.danger{
32 |   border-color: #f56c6c;
33 | }
34 | .m-form-control + .form-info{
35 |   font-size: 12px;
36 |   line-height: 1;
37 |   padding-top: 4px;
38 |   position: absolute;
39 |   top: 100%;
40 |   left: 0;
41 | }
42 | .m-form-control.danger + .form-info.error{
43 |   color: #f56c6c;
44 | }


--------------------------------------------------------------------------------
/examples/assets/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
 5 |   font-size: 15px;
 6 |   color: #1a1a1a;
 7 | }
 8 | .text-center {
 9 |   text-align: center;
10 | }
11 | .f-left {
12 |   float: left;
13 | }
14 | .f-right {
15 |   float: right;
16 | }
17 | .clearfix::before,
18 | .clearfix::after {
19 |   content: "";
20 |   display: table;
21 |   clear: both;
22 | }
23 | .readme {
24 |   border: solid 1px #dae4ef;
25 |   border-radius: 4px;
26 |   overflow: hidden;
27 | }
28 | .readme .title {
29 |   background-color: #F6F8FA;
30 |   line-height: 35px;
31 |   border-bottom: inherit;
32 |   padding: 0 15px;
33 | }
34 | .readme .content {
35 |   padding: 15px;
36 | }
37 | .main-header {
38 |   line-height: 35px;
39 | }
40 | .main-footer {
41 |   line-height: 35px;
42 |   font-size: 12px;
43 |   min-height: 150px;
44 |   color: #91979e;
45 | }
46 | .main-footer .line {
47 |   border-top: solid 1px #eaecef;
48 |   margin-top: 50px;
49 |   margin-bottom: 25px;
50 | }
51 | .main-footer .nav-list {
52 |   margin: 0;
53 |   padding: 0;
54 |   list-style: none;
55 | }
56 | .main-footer .nav-list li {
57 |   display: inline-block;
58 | }
59 | .main-footer .nav-list li a {
60 |   text-decoration: none;
61 |   color: #1779F7;
62 | }
63 | .main-footer .nav-list li + li {
64 |   margin-left: 15px;
65 | }
66 | .main-container {
67 |   max-width: 800px;
68 |   padding: 15px;
69 |   margin: 0 auto;
70 | }
71 | .doc-container {
72 |   max-width: 760px;
73 |   padding: 15px;
74 |   margin: 0 auto;
75 | }
76 | 


--------------------------------------------------------------------------------
/examples/assets/main.less:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
 5 |   font-size: 15px;
 6 |   color: #1a1a1a;
 7 | }
 8 | 
 9 | .text-center {
10 |   text-align: center;
11 | }
12 | 
13 | .f-left {
14 |   float: left;
15 | }
16 | .f-right {
17 |   float: right;
18 | }
19 | 
20 | .clearfix {
21 |   &::before,
22 |   &::after {
23 |     content: "";
24 |     display: table;
25 |     clear: both;
26 |   }
27 | }
28 | 
29 | .readme {
30 |   border: solid 1px #dae4ef;
31 |   border-radius: 4px;
32 |   overflow: hidden;
33 | 
34 |   .title {
35 |     background-color: #F6F8FA;
36 |     line-height: 35px;
37 |     border-bottom: inherit;
38 |     padding: 0 15px;
39 |   }
40 | 
41 |   .content {
42 |     padding: 15px;
43 |   }
44 | }
45 | 
46 | .main-header {
47 |   line-height: 35px;
48 | }
49 | 
50 | .main-footer {
51 |   line-height: 35px;
52 |   font-size: 12px;
53 |   min-height: 150px;
54 |   color: #91979e;
55 | 
56 |   .line {
57 |     border-top: solid 1px #eaecef;
58 |     margin-top: 50px;
59 |     margin-bottom: 25px;
60 |   }
61 | 
62 |   .nav-list {
63 |     margin: 0;
64 |     padding: 0;
65 |     list-style: none;
66 | 
67 |     li {
68 |       display: inline-block;
69 | 
70 |       a {
71 |         text-decoration: none;
72 |         color: #1779F7;
73 |       }
74 |       & + li {
75 |         margin-left: 15px;
76 |       }
77 |     }
78 |   }
79 | }
80 | 
81 | .main-container {
82 |   max-width: 800px;
83 |   padding: 15px;
84 |   margin: 0 auto;
85 | }
86 | 
87 | .doc-container {
88 |   max-width: 760px;
89 |   padding: 15px;
90 |   margin: 0 auto;
91 | }
92 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-component-devtool",
 3 |   "version": "0.1.0",
 4 |   "private": false,
 5 |   "main": "dist/index.umd.js",
 6 |   "scripts": {
 7 |     "dev": "vue-cli-service serve",
 8 |     "build:docs": "vue-cli-service build",
 9 |     "build:lib": "vue-cli-service lint && vue-cli-service build --dest dist --target lib --name index src/index.js",
10 |     "lint": "vue-cli-service lint",
11 |     "open": "dev serve -o docs"
12 |   },
13 |   "website": "https://lanyueos.com",
14 |   "github": "https://github.com/mengdu/vue-component-devtool",
15 |   "homepage": "https://mengdu.github.io/vue-component-devtool",
16 |   "repository": {
17 |     "type": "https",
18 |     "url": "git+https://github.com/mengdu/vue-component-devtool"
19 |   },
20 |   "bugs": {
21 |     "url": "https://github.com/mengdu/vue-component-devtool/issues"
22 |   },
23 |   "author": {
24 |     "name": "Lanyue",
25 |     "email": "lanyueos@qq.com"
26 |   },
27 |   "devDependencies": {
28 |     "@vue/cli-plugin-babel": "^4.0.0",
29 |     "@vue/cli-plugin-eslint": "^4.0.0",
30 |     "@vue/cli-service": "^4.0.0",
31 |     "babel-eslint": "^10.0.3",
32 |     "core-js": "^3.3.2",
33 |     "eslint": "^5.16.0",
34 |     "eslint-plugin-vue": "^5.0.0",
35 |     "less": "^3.10.3",
36 |     "less-loader": "^5.0.0",
37 |     "vue": "^2.6.10",
38 |     "vue-dotmd-loader": "^0.2.0",
39 |     "vue-router": "^3.1.5",
40 |     "vue-template-compiler": "^2.6.10"
41 |   },
42 |   "eslintConfig": {
43 |     "root": true,
44 |     "env": {
45 |       "node": true
46 |     },
47 |     "extends": [
48 |       "plugin:vue/essential",
49 |       "eslint:recommended"
50 |     ],
51 |     "rules": {
52 |       "no-unused-vars": "warn"
53 |     },
54 |     "parserOptions": {
55 |       "parser": "babel-eslint"
56 |     }
57 |   },
58 |   "eslintIgnore": [
59 |     "**/*.md"
60 |   ],
61 |   "postcss": {
62 |     "plugins": {
63 |       "autoprefixer": {}
64 |     }
65 |   },
66 |   "browserslist": [
67 |     "> 1%",
68 |     "last 2 versions"
69 |   ]
70 | }
71 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const camelcase = require('camelcase')
 2 | const pkg = require('./package.json')
 3 | const isProd = process.env.NODE_ENV === 'production'
 4 | 
 5 | module.exports = {
 6 |   publicPath: isProd ? './' : "/",
 7 |   outputDir: 'docs',
 8 |   // assetsDir: '', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
 9 |   indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。默认 index.html
10 |   pages: {
11 |     index: {
12 |       // page 的入口
13 |       entry: 'examples/main.js',
14 |       // 模板来源
15 |       template: 'public/index.html',
16 |       // 在 dist/index.html 的输出
17 |       filename: 'index.html',
18 |       // 当使用 title 选项时，
19 |       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
20 |       title: 'Vue Component',
21 |       // 在这个页面中包含的块，默认情况下会包含
22 |       // 提取出来的通用 chunk 和 vendor chunk。
23 |       chunks: ['chunk-vendors', 'chunk-common', 'index']
24 |     },
25 |     // 当使用只有入口的字符串格式时，
26 |     // 模板会被推导为 `public/subpage.html`
27 |     // 并且如果找不到的话，就回退到 `public/index.html`。
28 |     // 输出文件名会被推导为 `subpage.html`。
29 |     // subpage: 'src/subpage/main.js'
30 |   },
31 |   devServer: {
32 |     host: 'localhost',
33 |     port: '8080',
34 |     open: false
35 |   },
36 |   configureWebpack: { // webpack 配置
37 |     resolve: {
38 |       extensions: ['.md'],
39 |       alias: {
40 |         'vue$': 'vue/dist/vue.esm.js' // esm 版本支持template模板编译
41 |       }
42 |     },
43 |     output: {
44 |       // window.xxx
45 |       library: pkg.libraryName || camelcase(pkg.name, { pascalCase: true }) // 名字大驼峰
46 |     }
47 |   },
48 |   chainWebpack (config) {
49 |     // see: https://github.com/neutrinojs/webpack-chain
50 |     config.module
51 |       .rule('dotmd')
52 |       .test(/\.md$/)
53 |       .use('vue-loader')
54 |       .loader('vue-loader')
55 |       .options({
56 |         ...(config.module.rules.get('vue').uses.get('vue-loader').get('options') || null) // 与 vue-loader 配置保持一致
57 |       })
58 |       .end()
59 |       .use('vue-dotmd-loader')
60 |       .loader('vue-dotmd-loader')
61 |       .options({
62 |         dest: false,
63 |         markdown: {
64 |           options: {
65 |             html: true
66 |           }
67 |         }
68 |       })
69 |       .end()
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------