Merge pull request #71 from chenjiahan/dev

补充 babel-plugin-import 文档

README.md

@@ -19,6 +19,31 @@ npm i -S vant
  
 ## Usage
 
+### Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
+
+   ```js
+   // .babelrc or babel-loader option
+   {
+     "plugins": [
+       ["import", { "libraryName": "vant", "style": true }]
+     ]
+   }
+   ```
+
+   Then you can import components from vant, equivalent to import manually below.
+
+   ```js
+   // import js and css modularly, parsed by babel-plugin-import
+   import { Button } from 'vant';
+   ```
+
+### Manually import
+
+   ```jsx
+   import { Button } from 'vant';
+   import 'vant/lib/vant-css/button.css';
+   ```
+ 
  
 ### Import all components
  
@@ -30,18 +55,6 @@ import 'vant/lib/vant-css/index.css';
 Vue.use(vant);
 ```
  
-### On demand
-
-```javascript
-import Vue from 'vue';
-import { Button, Cell } from 'vant';
-import 'vant/lib/vant-css/button.css';
-import 'vant/lib/vant-css/cell.css';
-
-Vue.component(Button.name, Button);
-Vue.component(Cell.name, Cell);
-```
-
 ## Development
 
 ### Add a new component

README.zh-CN.md

@@ -18,29 +18,41 @@ npm i -S vant
 ## 二、使用
  
  
-### 1. 导入所有组件
+### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+
+   ```js
+   // .babelrc or babel-loader option
+   {
+     "plugins": [
+       ["import", { "libraryName": "vant", "style": true }]
+     ]
+   }
+   ```
+   
+   接着你可以直接引入 vant 组件，等价于下方的按需引入组件
+
+   ```js
+   // 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
+   import { Button } from 'vant';
+   ```
+
+### 按需引入组件
+
+   ```jsx
+   import { Button } from 'vant/lib/button';
+   import 'vant/lib/vant-css/button.css';
+   ```
+ 
+### 导入所有组件
  
 ```javascript
 import Vue from 'vue';
 import vant from 'vant';
-// 你也可以使用自己的主题
 import 'vant/lib/vant-css/index.css';
 
 Vue.use(vant);
 ```
 
-### 2. 按需导入组件
-
-```javascript
-import Vue from 'vue';
-import { Button, Cell } from 'vant';
-import 'vant/lib/vant-css/button.css';
-import 'vant/lib/vant-css/cell.css';
-
-Vue.component(Button.name, Button);
-Vue.component(Cell.name, Cell);
-```
-
 ## 三、开发
 
 ### 1. 新建一个组件

build/webpack.config.dev.js

@@ -14,7 +14,6 @@ require('./genExamples')(isProduction);
 
 module.exports = {
   entry: {
-    vendor: ['vue', 'vue-router', 'zan-doc'],
     'vant-docs': './docs/src/index.js',
     'vant-examples': './docs/src/examples.js'
   },
@@ -22,7 +21,8 @@ module.exports = {
     path: path.join(__dirname, '../docs/dist'),
     publicPath: '/',
     filename: '[name].js',
-    umdNamedDefine: true
+    umdNamedDefine: true,
+    chunkFilename: 'async.[name].js'
   },
   devServer: {
     historyApiFallback: {
@@ -37,7 +37,7 @@ module.exports = {
     modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
     extensions: ['.js', '.vue', '.css'],
     alias: {
-      vue$: 'vue/dist/vue.esm.js',
+      vue: 'vue/dist/vue.esm.js',
       src: path.join(__dirname, '../src'),
       packages: path.join(__dirname, '../packages'),
       lib: path.join(__dirname, '../lib'),
@@ -131,6 +131,10 @@ module.exports = {
       filename: 'examples.html',
       inject: true
     }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: 2
+    }),
     new webpack.HotModuleReplacementPlugin(),
     new OptimizeCssAssetsPlugin(),
     new ExtractTextPlugin({

build/webpack.config.prod.js

@@ -6,9 +6,10 @@ var devConfig = require('./webpack.config.dev.js');
 module.exports = merge(devConfig, {
   output: {
     path: path.join(__dirname, '../docs/dist'),
-    publicPath: 'https://b.yzcdn.cn/zanui/vue',
+    publicPath: 'https://b.yzcdn.cn/zanui/vue/',
     filename: '[name].[hash:8].js',
-    umdNamedDefine: true
+    umdNamedDefine: true,
+    chunkFilename: 'async.[name].[chunkhash:8].js'
   },
   devtool: false,
   plugins: [

docs/src/doc.config.js

@@ -30,6 +30,10 @@ module.exports = {
                 "path": "/changelog",
                 "title": "更新日志",
                 noExample: true
+              },
+              {
+                "title": "业务组件",
+                "link": "/zanui/captain/component/quickstart"
               }
             ]
           }

docs/src/index.js

@@ -2,16 +2,9 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesDocsApp';
 import routes from './router.config';
-import ZanUI from 'src/index.js';
 import ZanDoc from 'zan-doc';
-import packageJson from '../../package.json';
 import DemoBlock from './components/demo-block';
 
-const global = {
-  version: packageJson.version
-};
-window._global = global;
-
 import '../assets/docs.css';
 import 'packages/vant-css/src/index.css';
 
@@ -22,11 +15,7 @@ function isMobile() {
 }
 
 Vue.use(VueRouter);
-Vue.use(ZanUI);
 Vue.use(ZanDoc);
-Vue.use(ZanUI.Lazyload, {
-  lazyComponent: true
-});
 Vue.component('demo-block', DemoBlock);
 
 const routesConfig = routes();

docs/src/router.config.js

@@ -1,4 +1,6 @@
 const navs = require('./doc.config')['zh-CN'].nav;
+import componentDocs from '../examples-dist/entry-docs';
+import componentDemos from '../examples-dist/entry-demos';
 
 const registerRoute = (isExample) => {
   let route = [];
@@ -9,30 +11,25 @@ const registerRoute = (isExample) => {
 
     if (nav.groups) {
       nav.groups.forEach(group => {
-        group.list.forEach(nav => {
+        group.list.forEach(addRoute);
-          addRoute(nav);
-        });
       });
     } else if (nav.children) {
-      nav.children.forEach(nav => {
+      nav.children.forEach(addRoute);
-        addRoute(nav);
-      });
     } else {
       addRoute(nav);
     }
   });
 
   function addRoute(page) {
-    const component = isExample
+    const { path } = page;
-      ? require(`../examples-dist${page.path}.vue`)
+    if (path) {
-      : require(`../examples-docs${page.path}.md`);
+      const name = path.replace('/', '');
       route.push({
-      path: '/component' + page.path,
+        path: '/component' + path,
-      component: component.default || component
+        component: isExample ? componentDemos[name] : componentDocs[name]
       });
     }
-
+  }
-  // console.log(route);
 
   return route;
 };

package.json

@@ -60,10 +60,10 @@
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-runtime": "^6.25.0",
-    "chai": "^4.1.0",
+    "chai": "^4.1.1",
     "cheerio": "^0.22.0",
     "codecov": "^2.2.0",
-    "cross-env": "^5.0.1",
+    "cross-env": "^5.0.5",
     "css-loader": "^0.28.4",
     "eslint-plugin-vue": "^2.1.0",
     "extract-text-webpack-plugin": "2.1.2",
@@ -87,7 +87,7 @@
     "karma-spec-reporter": "^0.0.31",
     "karma-webpack": "^2.0.4",
     "lerna": "^2.0.0",
-    "markdown-it": "^8.3.1",
+    "markdown-it": "^8.3.2",
     "markdown-it-container": "^2.0.0",
     "mocha": "^3.4.2",
     "optimize-css-assets-webpack-plugin": "^3.0.0",
@@ -106,15 +106,15 @@
     "vue": "^2.4.2",
     "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^13.0.2",
+    "vue-loader": "^13.0.4",
     "vue-markdown-loader": "^2.0.0",
     "vue-router": "^2.7.0",
     "vue-style-loader": "^3.0.0",
     "vue-template-compiler": "^2.4.2",
     "vue-template-es2015-compiler": "^1.5.3",
-    "webpack": "^3.4.1",
+    "webpack": "^3.5.1",
-    "webpack-dev-server": "^2.6.1",
+    "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.1.4"
+    "zan-doc": "0.1.11"
   }
 }

packages/vant-css/src/field.css

@@ -50,9 +50,12 @@
 
   &--error {
     .van-field__control {
+      &,
+      &::placeholder {
         color: $c-red;
       }
     }
+  }
 
   &--border {
     .van-field__control {