vue router

.babelrc

@@ -2,6 +2,7 @@
   "presets": ["env"],
   "plugins": [
     "transform-vue-jsx",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "syntax-dynamic-import"
   ]
 }

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "extends": ["plugin:vue-libs/recommended"], // ,"plugin:vue-libs/recommended"
   "rules": {
     "comma-dangle": [2, "always-multiline"],

components/button/demo/basic.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <AntButton type="primary">Primary</AntButton>
+    <AntButton>Default</AntButton>
+    <AntButton type="dashed">Dashed</AntButton>
+    <AntButton type="danger">Danger</AntButton>
+  </div>
+</template>
+<script>
+import '../style'
+import { Button } from 'antd'
+export default {
+  components: {
+    AntButton: Button,
+  },
+}
+</script>

components/button/demo/button.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <AntButton :type="this.type" @click="handleClick" class="test">
+      primary
+    </AntButton>
+    <AntButton @mouseover="handleClick" @mouseout="handleClick">Default</AntButton>
+    <AntButton type="dashed">Dashed</AntButton>
+    <AntButton type="danger">Danger</AntButton>
+    <br />
+    <AntButton type="primary" shape="circle" icon="search" />
+    <AntButton type="primary" icon="search">Search</AntButton>
+    <AntButton shape="circle" icon="search" />
+    <AntButton icon="search">Search</AntButton>
+    <br />
+    <AntButton shape="circle" icon="search" />
+    <AntButton icon="search">Search</AntButton>
+    <AntButton type="dashed" shape="circle" icon="search" />
+    <AntButton type="dashed" icon="search">Search</AntButton>
+    <div>
+      <AntButton type="primary">Primary</AntButton>
+      <AntButton type="primary" disabled>Primary(disabled)</AntButton>
+      <br />
+      <AntButton>Default</AntButton>
+      <AntButton disabled>Default(disabled)</AntButton>
+      <br />
+      <AntButton>Ghost</AntButton>
+      <AntButton disabled>Ghost(disabled)</AntButton>
+      <br />
+      <AntButton type="dashed">Dashed</AntButton>
+      <AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
+    </div>
+    <div :style="{background: 'rgb(190, 200, 200)', padding: '26px 16px 16px'}">
+      <AntButton type="primary" ghost>Primary</AntButton>
+      <AntButton ghost>Default</AntButton>
+      <AntButton type="dashed" ghost>Dashed</AntButton>
+      <AntButton type="danger" ghost>danger</AntButton>
+    </div>
+    <div>
+      <AntButton type="primary" loading>
+        Loading
+      </AntButton>
+      <AntButton type="primary" size="small" loading>
+        Loading
+      </AntButton>
+      <br />
+      <AntButton type="primary">
+        Click me!
+      </AntButton>
+      <AntButton type="primary" icon="poweroff">
+        Click me!
+      </AntButton>
+      <br />
+      <AntButton shape="circle" loading />
+      <AntButton type="primary" shape="circle" loading />
+    </div>
+    <div>
+      <ButtonGroup>
+        <AntButton>Cancel</AntButton>
+        <AntButton type="primary">OK</AntButton>
+      </ButtonGroup>
+      <ButtonGroup size="large">
+        <AntButton disabled>L</AntButton>
+        <AntButton disabled>M</AntButton>
+        <AntButton disabled>R</AntButton>
+      </ButtonGroup>
+      <ButtonGroup size="small">
+        <AntButton type="primary">L</AntButton>
+        <AntButton>M</AntButton>
+        <AntButton>M</AntButton>
+        <AntButton type="dashed">R</AntButton>
+      </ButtonGroup>
+    </div>
+  </div>
+</template>
+<script>
+import '../style'
+import { Button } from 'antd'
+const ButtonGroup = Button.Group
+export default {
+  data () {
+    return {
+      type: 'primary',
+    }
+  },
+  methods: {
+    handleClick (event) {
+      console.log(event)
+      this.type = this.type === 'primary' ? 'danger' : 'primary'
+    },
+  },
+  components: {
+    AntButton: Button,
+    ButtonGroup,
+  },
+}
+</script>

components/index.js

@@ -1,10 +1,3 @@
-import './button/style'
-import './checkbox/style'
-import './icon/style'
-import './radio/style'
-import './grid/style'
-import './rate/style'
-
 export { default as Button } from './button'
 
 export { default as Checkbox } from './checkbox'

examples/button.vue

@@ -73,7 +73,7 @@
   </div>
 </template>
 <script>
-import { Button } from '../components/index'
+import { Button } from 'antd/index'
 const ButtonGroup = Button.Group
 export default {
   data () {

examples/index.html

@@ -4,7 +4,9 @@
 </head>
 
 <body>
-    <div id="app"></div>
+    <div id="app">
+      <router-view></router-view>
+    </div>
 </body>
 <script src="/dist/build.js"></script>
 

examples/index.js

@@ -1,28 +1,16 @@
-import Vue from 'vue'
-import Checkbox from './checkbox.vue'
-import Button from './button.vue'
-import Radio from './radio.vue'
-import Grid from './grid.vue'
-// import Dialog from './dialog.vue'
-import Rate from './rate.vue'
 import './index.less'
+import Vue from 'vue'
+import VueMarkdown from 'vue-markdown'
+import VueRouter from 'vue-router'
+import routes from './routes'
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  mode: 'history',
+  routes,
+})
+Vue.component('vue-markdown', VueMarkdown)
 new Vue({
   el: '#app',
-  template: `
-    <div>
-      <Grid />
-      <Checkbox />
-      <AntButton />
-      <Radio />
-      <Rate />
-    </div>
-    `,
-  components: {
-    AntButton: Button,
-    // AntDialog: Dialog,
-    Checkbox,
-    Grid,
-    Radio,
-    Rate,
-  },
+  router,
 })

examples/routes.js

@@ -0,0 +1,11 @@
+const AsyncComp = () => {
+  const pathnameArr = window.location.pathname.split('/')
+  const com = pathnameArr[1] || 'button'
+  const demo = pathnameArr[2] || 'basic'
+  return {
+    component: import(`../components/${com}/demo/${demo}.vue`),
+  }
+}
+export default [
+  { path: '/*', component: AsyncComp },
+]

package.json

@@ -28,9 +28,11 @@
   ],
   "devDependencies": {
     "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-loader": "^7.1.2",
     "babel-plugin-istanbul": "^4.1.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
@@ -66,6 +68,7 @@
     "stylelint-config-standard": "^17.0.0",
     "vue": "^2.4.4",
     "vue-loader": "^13.0.5",
+    "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.4.4",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.8.2"

webpack.config.js

@@ -48,6 +48,7 @@ module.exports = {
     extensions: ['.js', '.vue'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
+      'antd': path.join(__dirname, 'components'),
     },
   },
   devServer: {