liyanhong
/
jinjianback1.1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add Element-Ui using cdn tutorial

This commit is contained in:
Pan 2018-05-14 10:48:27 +08:00
parent f01a1ad7b7
commit d47939e4e6
2 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
README-zh.md
View File

@ -46,6 +46,29 @@ npm run build --report
## Demo ## Demo
![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif) ![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 ## License
[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license. [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.

27
README.md
View File

@ -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) [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 ## License
[MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license. [MIT](https://github.com/PanJiaChen/vueAdmin-template/blob/master/LICENSE) license.