doc: add cdn guide

feature: add due && element cdn
2017-10-19 10:25:41 +08:00 · 2017-10-19 10:12:49 +08:00
4 changed files with 32 additions and 2 deletions
--- a/README-zh.md
+++ b/README-zh.md
@ -6,6 +6,26 @@

 ## Extra
 如果你想要根据用户角色来动态生成侧边栏和router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
+
+## Element-Ui 使用cdn教程
+首先找到 `index.html` ([根目录下](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
+
+引入 Element的css和js ，并且引入 vue 。因为 Element-Ui 是依赖 vue 的，所以必须在它之前引入 vue 。
+
+之后找到 [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js) 加入 `externals` 让webpack 不打包 vue 和 element
+```
+externals: {
+  vue: 'Vue',
+  'element-ui':'ELEMENT'
+}
+```
+
+之后还有一个小细节是如果你用了全局对象方式引入vue，就不需要 手动 `Vue.use(Vuex）` ，它会自动挂载，具体见 [issue](https://github.com/vuejs/vuex/issues/731)
+
+最终你可以使用 `npm run build --report` 查看效果
+如图：
+![demo](https://panjiachen.github.io/images/element-cdn.png)
+
  
 ## 相关项目
 [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -18,6 +18,10 @@ module.exports = {
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
+  externals: {
+    vue: 'Vue',
+    'element-ui':'ELEMENT'
+  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
--- a/index.html
+++ b/index.html
@ -3,8 +3,14 @@
  <head>
    <meta charset="utf-8">
    <title>vue-admin</title>
+    <!-- 引入样式 -->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4.7/lib/theme-default/index.css">
  </head>
  <body>
+    <!-- 先引入 Vue -->
+    <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
+    <!-- 引入组件库 -->
+    <script src="https://unpkg.com/element-ui@1.4.7/lib/index.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,10 +1,10 @@
-import Vue from 'vue'
+// import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
 import user from './modules/user'
 import getters from './getters'

-Vue.use(Vuex)
+// Vue.use(Vuex)

 const store = new Vuex.Store({
  modules: {
Author	SHA1	Message	Date
Pan	d3615b1951	doc: add cdn guide	2017-10-19 10:25:41 +08:00
Pan	746aff5609	feature: add due && element cdn	2017-10-19 10:12:49 +08:00