update route

bin/build-entry.js

@@ -10,6 +10,8 @@ var ISNTALL_COMPONENT_TEMPLATE = `  Vue.component({{name}}.name, {{name}});`
 var MAIN_TEMPLATE = `{{include}}
 
 const install = function(Vue) {
+  if (install.installed) return;
+
 {{install}}
 
   Vue.use(Loading);

examples/app.vue

@@ -263,52 +263,54 @@
 </style>
 
 <template>
-  <div class="pure-g">
-    <div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
-      <a class="pure-menu-heading app__brand" v-link="'/'">
-        <span class="app__eleme">ELEME</span>NT
-      </a>
+  <div id="app">
+    <div class="pure-g">
+      <div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
+        <router-link class="pure-menu-heading app__brand" to="/">
+          <span class="app__eleme">ELEME</span>NT
+        </router-link>
 
-      <template v-for="nav in navs">
-        <a
-          href="#"
-          @click.prevent="navState.$set($index, !navState[$index] || false)"
-          class="pure-menu-heading app__menu__label"
-          :class="{ 'unfold': !navState[$index] }"
-          v-text="nav.group"></a>
-        <ul
-          class="pure-menu-list"
-          transition="slidedown"
-          v-show="!navState[$index]"
-          :style="{
-            maxHeight: nav.list.length * 44 + 'px'
-          }">
-          <li
-            class="pure-menu-item app__menu__item"
-            v-for="item in nav.list"
-            v-if="!item.disabled">
-            <a
-              class="pure-menu-link app__menu__link"
-              v-link="{ path: item.path, activeClass: 'active' }"
-              v-text="item.name"></a>
-          </li>
-        </ul>
-      </template>
+        <template v-for="(nav, key) in navs">
+          <a
+            href="#"
+            @click.prevent="navState.$set(key, !navState[key] || false)"
+            class="pure-menu-heading app__menu__label"
+            :class="{ 'unfold': !navState[key] }"
+            v-text="nav.group"></a>
+          <ul
+            class="pure-menu-list"
+            transition="slidedown"
+            v-show="!navState[key]"
+            :style="{
+              maxHeight: nav.list.length * 44 + 'px'
+            }">
+            <li
+              class="pure-menu-item app__menu__item"
+              v-for="item in nav.list"
+              v-if="!item.disabled">
+              <router-link
+                class="pure-menu-link app__menu__link"
+                :to="{ path: item.path, activeClass: 'active' }"
+                v-text="item.name"></router-link>
+            </li>
+          </ul>
+        </template>
 
+      </div>
+      <div class="pure-u-5-6 app__content">
+        <header class="app__header">
+          <h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
+        </header>
+        <section class="app__main" ref="main">
+          <p class="app__description">{{ $route.description }}</p>
+          <router-view></router-view>
+        </section>
+        <toc main=".app__main"></toc>
+      </div>
     </div>
-    <div class="pure-u-5-6 app__content">
-      <header class="app__header">
-        <h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
-      </header>
-      <section class="app__main" v-el:main>
-        <p class="app__description">{{ $route.description }}</p>
-        <router-view></router-view>
-      </section>
-      <toc main=".app__main"></toc>
-    </div>
+
+    <button class="hljs__button" ref="button"></button>
   </div>
-
-  <button class="hljs__button" v-el:button></button>
 </template>
 
 <script>
@@ -341,10 +343,10 @@
       this.navs = navs;
     },
 
-    ready() {
+    mounted() {
       this.mainContent = document.querySelector('.app__content');
 
-      E.delegate(this.$els.main, '.hljs__button', 'click.highlight', e => {
+      E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
         const parent = e.target.parentNode;
 
         toggleClass(parent, 'open');
@@ -352,7 +354,7 @@
     },
 
     beforeDestroy() {
-      E.undelegate(this.$els.main, '.hljs', 'click.highlight');
+      E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
     },
 
     watch: {

examples/docs/tooltip.md

@@ -34,20 +34,20 @@
   module.exports = {
     data() {
       return {
-        switch: true
+        value: true
       }
     },
 
     computed: {
       effect() {
-        return this.switch ? 'dark' : 'light';
+        return this.value ? 'dark' : 'light';
       }
     }
   }
 </script>
 
 <el-switch
-  :value.sync="switch"
+  v-model="value"
   on-text="黑色"
   off-text="白色"
   on-color="#1f2d3d"

examples/entry.js

@@ -5,22 +5,15 @@ import configRouter from './route.config';
 import Element from 'main/index.js';
 import 'packages/theme-default/src/index.css';
 
-// test Released package
-// import Element from '../lib/index.js';
-// import '../lib/theme-default/index.css';
-
 Vue.use(Element);
 Vue.use(VueRouter);
 
-const router = new VueRouter();
-const app = Vue.extend({
-  template: '<entry></entry>',
-  components: { entry }
+const router = new VueRouter({
+  base: __dirname,
+  routes: configRouter
 });
 
-configRouter(router);
-router.start(app, 'app');
-
-router.afterEach(() => {
-  document.body.scrollTop = 0;
-});
+new Vue({ // eslint-disable-line
+  render: h => h(entry),
+  router
+}).$mount('#app');

examples/index.template.html

@@ -1,12 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>Element 后台组件</title>
+    <title>test-vue2</title>
   </head>
   <body>
-    <app></app>
-    <!-- built files will be auto injected -->
+    <div id="app"></div>
   </body>
 </html>

examples/route.config.js

@@ -1,40 +1,36 @@
 import navConfig from './nav.config.json';
 
 const registerRoute = (config) => {
-  let route = {};
-  config.map(nav => nav.list.map(page => {
-    try {
-      route[page.path] = page.path !== '/changelog' ? {
-        component: require(`./docs${page.path}.md`),
-        title: page.title || page.name,
-        description: page.description
-      } : {
-        component: require('../CHANGELOG.md'),
-        title: page.title || page.name,
-        description: page.description
-      };
-    } catch (e) {
-      console.error(e);
-      page.disabled = true;
-    }
-  }));
+  let route = [];
+  config
+    .map(nav =>
+      nav.list.map(page => {
+        if (page.path === '/changelog') return;
+        const component = require(`./docs${page.path}.md`);
+
+        route.push({
+          path: page.path,
+          title: page.title || page.name,
+          description: page.description,
+          component: component.default || component
+        });
+      })
+    );
 
   return { route, navs: config };
 };
 
 const route = registerRoute(navConfig);
 
-export const navs = route.navs;
-export default function configRouter(router) {
-  router.map(Object.assign({
-    '*': {
-      component: require('./docs/home.md')
-    }
-  }, route.route));
+route.route.push({
+  path: '/changelog',
+  component: require('../CHANGELOG.md')
+});
 
-  router.beforeEach(transition => {
-    document.title = transition.to.title || document.title;
-    transition.to.router.app.$broadcast('element.example.reload');
-    transition.next();
-  });
-};
+route.route.push({
+  path: '*',
+  component: require('./docs/home.md')
+});
+
+export const navs = route.navs;
+export default route.route;

package.json

@@ -41,10 +41,10 @@
     "purecss": "^0.6.0",
     "q": "^1.4.1",
     "uppercamelcase": "^1.1.0",
-    "vue": "^1.0.26",
-    "vue-loader": "^8.5.3",
+    "vue": "^2.0.0-beta.5",
+    "vue-loader": "^9.2.0",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.1.8",
-    "vue-router": "^0.7.13"
+    "vue-router": "^2.0.0-beta.2"
   }
 }

packages/button/src/button.vue

@@ -10,9 +10,9 @@
       }
     ]"
   >
-    <i class="el-icon-loading" v-if="loading"></i><i :class="'el-icon-' + icon" v-if="icon && !loading"></i><span v-if="_slotContents && _slotContents.default">
-      <slot></slot>
-    </span>
+    <i class="el-icon-loading" v-if="loading"></i>
+    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
+    <slot></slot>
   </button>
 </template>
 <script>

scripts/cooking.demo.js

@@ -84,6 +84,6 @@ Object.keys(Components).forEach(function (key) {
 // 开发模式不需要将不存在的 style.css 打包进去
 cooking.add('externals', externals);
 
-cooking.config.vue.loaders.html = 'html?minimize=true&conservativeCollapse=false';
+// cooking.config.vue.loaders.html = 'html?minimize=true&conservativeCollapse=false';
 
 module.exports = cooking.resolve();