diff --git a/README-zh.md b/README-zh.md index dd5c85a..206d898 100644 --- a/README-zh.md +++ b/README-zh.md @@ -46,6 +46,29 @@ npm run build --report ## Demo ![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif) +## 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) + +**[具体代码](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)** + +**[对应分支](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn) + ## License [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license. diff --git a/README.md b/README.md index e57b37c..b8eb079 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,33 @@ If you want router permission && generate menu by user roles , you can use this [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) +### Element-Ui using cdn tutorial +First find `index.html`([root directory](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/index.html)) + +Import css and js of `Element`, and then import vue. Because `Element` is vue-dependent, vue must be import before it. + +Then find [webpack.base.conf.js](https://github.com/PanJiaChen/vueAdmin-template/blob/element-ui-cdn/build/webpack.base.conf.js) +Add `externals` to make webpack not package vue and element. + +``` +externals: { + vue: 'Vue', + 'element-ui':'ELEMENT' +} +``` + +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 + [issue](https://github.com/vuejs/vuex/issues/731) + +And you can use `npm run build --report` to see the effect + +Pictured: +![demo](https://panjiachen.github.io/images/element-cdn.png) + +**[Detailed code](https://github.com/PanJiaChen/vueAdmin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177)** + +**[Branch](https://github.com/PanJiaChen/vueAdmin-template/tree/element-ui-cdn) + ## License [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.