Ver código fonte

add Element-Ui using cdn tutorial

Pan 6 anos atrás
pai
commit
d47939e4e6
2 arquivos alterados com 50 adições e 0 exclusões
  1. 23 0
      README-zh.md
  2. 27 0
      README.md

+ 23 - 0
README-zh.md

@@ -46,6 +46,29 @@ npm run build --report
46 46
 ## Demo
47 47
 ![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
48 48
 
49
+## Element-Ui 使用cdn教程
50
+首先找到 `index.html` ([根目录下](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
51
+
52
+引入 Element的css和js ,并且引入 vue 。因为 Element-Ui 是依赖 vue 的,所以必须在它之前引入 vue 。
53
+
54
+之后找到 [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js) 加入 `externals` 让webpack 不打包 vue 和 element
55
+```
56
+externals: {
57
+  vue: 'Vue',
58
+  'element-ui':'ELEMENT'
59
+}
60
+```
61
+
62
+之后还有一个小细节是如果你用了全局对象方式引入vue,就不需要 手动 `Vue.use(Vuex)` ,它会自动挂载,具体见 [issue](https://github.com/vuejs/vuex/issues/731)
63
+
64
+最终你可以使用 `npm run build --report` 查看效果
65
+如图:
66
+![demo](https://panjiachen.github.io/images/element-cdn.png)
67
+
68
+**[具体代码](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
69
+
70
+**[对应分支](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)
71
+
49 72
 ## License
50 73
 [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.
51 74
 

+ 27 - 0
README.md

@@ -37,6 +37,33 @@ If you want router permission && generate menu by user roles , you can use this
37 37
 
38 38
  [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
39 39
 
40
+### Element-Ui using cdn tutorial
41
+First find `index.html`([root directory](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html))
42
+
43
+Import css and js of `Element`, and then import vue. Because `Element` is vue-dependent, vue must be import before it.
44
+
45
+Then find [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js)
46
+Add `externals` to make webpack not package vue and element.
47
+
48
+```
49
+externals: {
50
+  vue: 'Vue',
51
+  'element-ui':'ELEMENT'
52
+}
53
+```
54
+
55
+Finally there is a small detail to pay attention to that if you import vue in global, you don't need to manually `Vue.use(Vuex)`, it will be automatically mounted, see
56
+ [issue](https://github.com/vuejs/vuex/issues/731)
57
+
58
+And you can use `npm run build --report` to see the effect
59
+
60
+Pictured:
61
+![demo](https://panjiachen.github.io/images/element-cdn.png)
62
+
63
+**[Detailed code](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)**
64
+
65
+**[Branch](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn)
66
+
40 67
 
41 68
 ## License
42 69
 [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.