update docs

wmhello · Dec 19, 2018 · 090214b · 090214b
1 parent 93ae2f1
commit 090214b
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
-Ant Design Pro Vue
-====
+<h1 align="center">Ant Design Pro Vue</h1>
 
+<div align="center">
+An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on  [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/)
+</div>
 
 
 Overview
@@ -33,8 +35,10 @@ Overview
 ![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
 
 
+
 环境和依赖
 ----
+
 - node
 - yarn
 - webpack
@@ -45,6 +49,8 @@ Overview
 - [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
 - [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation)  - antv/g2 封装实现
 
+> 请注意，我们强烈建议本项目使用 [Yarn](https://yarnpkg.com/) 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本，而引入了新版本所照成的问题。本作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。
+
 
 
 项目下载和运行
@@ -81,11 +87,13 @@ yarn run lint
 其他说明
 ----
 
+- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 时，描述清楚您的使用环境，所使用 Pro 版本或分支，出现的情况等...** 另外，若有疑问也可加入 QQ群 （Ant Design Vue 原作者使用讨论群 217490093），本项目的几位维护者也在该群
+
 - 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli
 
 - 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码
 
-- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/)  项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)
+- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/)  项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)，也可以下载 [ANTD-PRO-Easy-Mock-API.zip](https://github.com/sendya/ant-design-pro-vue/files/2682711/ANTD-PRO-Easy-Mock-API.zip) 然后自行导入到自己的 mock 服务上
 
 - 修改 Ant Design 配色，在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
 ```ecmascript 6
@@ -104,21 +112,6 @@ yarn run lint
     }
   }
 ```
-- 按需加载  修改文件 `babel.config.js` 并且引入 `babel-plugin-import` 开发依赖
-```ecmascript 6
-module.exports = {
-  presets: [
-    '@vue/app'
-  ],
-  plugins: [
-    [ "import", {
-      "libraryName": "ant-design-vue",
-      "libraryDirectory": "es",
-      "style": "css"
-    } ]
-  ]
-}
-```
 
 
 附属文档
@@ -130,6 +123,8 @@ module.exports = {
 
 - [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
 
+- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
+
 - 其他待补充...
 
 

diff --git a/docs/LoadOnDemand.md b/docs/LoadOnDemand.md
@@ -0,0 +1,94 @@
+按需加载 减小打包
+====
+
+
+
+## 按需引入组件依赖
+
+`Ant Design Pro Vue` 默认编码工作并不支持按需引入，不过可以通过以下操作结合 [Ant Design Of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 官方文档来进行按需引入。
+
+1. 增加项目按需引入依赖
+2. 修改引入组件方式
+
+
+
+1. 增加按需引入所需依赖  `babel-plugin-import` 
+并且修改文件 `babel.config.js` 
+   ```ecmascript 6
+   module.exports = {
+     presets: [
+       '@vue/app'
+     ],
+     plugins: [
+       [ "import", {
+         "libraryName": "ant-design-vue",
+         "libraryDirectory": "es",
+         "style": "css"
+       } ]
+     ]
+   }
+   ```
+
+
+2. 修改引入组件方式 (注意，这只是一个例子，请完整引入你所需要的组件)
+
+   文件 `@/components/use.js`
+
+   ```javascript
+   import Vue from 'vue'
+   import {
+       Input, 
+       Button, 
+       Select, 
+       Card, 
+       Form, 
+       Row, 
+       Col, 
+       Modal, 
+       Table, 
+       notification
+   } from 'ant-design-vue'
+
+   Vue.use(Input)
+   Vue.use(Button)
+   Vue.use(Select)
+   Vue.use(Card)
+   Vue.use(Form)
+   Vue.use(Row)
+   Vue.use(Col)
+   Vue.use(Modal)
+   Vue.use(Table)
+   Vue.use(notification)
+
+   Vue.prototype.$notification = notification;
+   ```
+
+
+3. 最后在 `main.js` 中引入 `@/components/use.js` 文件即可，如下
+
+   ```javascript
+
+   import Vue from 'vue'
+   import App from './App'
+
+   // 引入 按需组件的统一引入文件
+   import './components/use'
+
+   import './style/index.less'
+
+
+   Vue.config.productionTip = false
+
+   new Vue({
+     render: h => h(App),
+   }).$mount('#app')
+
+   ```
+
+
+## 其他 减少打包大小
+
+
+
+1.   Ant Design Vue 1.2.x 版本起，采用的 ant-design 官方方案 svg Icon 组件，整个项目打包会变大很多，图标进行按需加载可参考 https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo
+2. moment 按需加载 可参考 https://github.com/jmblog/how-to-optimize-momentjs-with-webpack