Compare commits
2 Commits
master
...
element-ui
| Author | SHA1 | Date |
|---|---|---|
Pan
|
d3615b1951 | |
|
Pan
|
746aff5609 |
20
README-zh.md
20
README-zh.md
|
|
@ -6,6 +6,26 @@
|
||||||
|
|
||||||
## Extra
|
## Extra
|
||||||
如果你想要根据用户角色来动态生成侧边栏和router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)
|
如果你想要根据用户角色来动态生成侧边栏和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` 查看效果
|
||||||
|
如图：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 相关项目
|
## 相关项目
|
||||||
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,10 @@ module.exports = {
|
||||||
? config.build.assetsPublicPath
|
? config.build.assetsPublicPath
|
||||||
: config.dev.assetsPublicPath
|
: config.dev.assetsPublicPath
|
||||||
},
|
},
|
||||||
|
externals: {
|
||||||
|
vue: 'Vue',
|
||||||
|
'element-ui':'ELEMENT'
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.vue', '.json'],
|
extensions: ['.js', '.vue', '.json'],
|
||||||
alias: {
|
alias: {
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,14 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>vue-admin</title>
|
<title>vue-admin</title>
|
||||||
|
<!-- 引入样式 -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4.7/lib/theme-default/index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import Vue from 'vue'
|
// import Vue from 'vue'
|
||||||
import Vuex from 'vuex'
|
import Vuex from 'vuex'
|
||||||
import app from './modules/app'
|
import app from './modules/app'
|
||||||
import user from './modules/user'
|
import user from './modules/user'
|
||||||
import getters from './getters'
|
import getters from './getters'
|
||||||
|
|
||||||
Vue.use(Vuex)
|
// Vue.use(Vuex)
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
modules: {
|
modules: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue