Skip to content

Commit d0ad978

Browse files
caihgcaihg
committed
Vue.js 2.0 示例
1 parent 5ce029e commit d0ad978

File tree

22 files changed

+449
-0
lines changed

22 files changed

+449
-0
lines changed

‎vue-demo/vue-elementUI-2.0/.babelrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["es2015", { "modules": false }]
4+
]
5+
}

‎vue-demo/vue-elementUI-2.0/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
.idea

‎vue-demo/vue-elementUI-2.0/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# element-starter
2+
3+
> A starter kit for Element UI generated by vue-cli
4+
5+
*If you are familiar with [cooking](https://github.com/elemefe/cooking), [here](https://github.com/ElementUI/element-cooking-starter) is a starter generated with it*
6+
7+
## Start
8+
9+
- Clone or download this repository
10+
- Enter your local directory, and install dependencies:
11+
12+
``` bash
13+
npm install
14+
```
15+
16+
## Develop
17+
18+
``` bash
19+
# serve with hot reload at localhost:8080
20+
npm run dev
21+
```
22+
23+
## Build
24+
25+
``` bash
26+
# build for production with minification
27+
npm run build
28+
```

‎vue-demo/vue-elementUI-2.0/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue.js 2.x + Vue Router + Vuex</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎vue-demo/vue-elementUI-2.0/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "element-starter",
3+
"description": "A Vue.js project",
4+
"author": "caihg",
5+
"private": false,
6+
"scripts": {
7+
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open",
8+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
9+
},
10+
"dependencies": {
11+
"element-ui": "^1.0.0",
12+
"vue": "^2.1.0",
13+
"vue-resource": "^1.0.3",
14+
"vue-router": "^2.1.1",
15+
"vue-server-renderer": "^2.1.3",
16+
"vuex": "^2.0.0",
17+
"vuex-router-sync": "^3.0.0"
18+
},
19+
"devDependencies": {
20+
"babel-core": "^6.0.0",
21+
"babel-loader": "^6.0.0",
22+
"babel-preset-es2015": "^6.13.2",
23+
"cross-env": "^1.0.6",
24+
"css-loader": "^0.23.1",
25+
"file-loader": "^0.8.5",
26+
"style-loader": "^0.13.1",
27+
"vue-loader": "^10.0.0",
28+
"vue-template-compiler": "^2.1.0",
29+
"webpack": "^2.1.0-beta.25",
30+
"webpack-dev-server": "^2.1.0-beta.0",
31+
"webpack-dev-middleware": "^1.6.1"
32+
}
33+
}

‎vue-demo/vue-elementUI-2.0/src/assets/logo.png

6.69 KB
Loading

‎vue-demo/vue-elementUI-2.0/src/components/asideContainer/platform.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<!-- 平台管理 -->
3+
<div>
4+
<ul class="aside-nav">
5+
<li><router-link to="/page/platform/userList">用户列表</router-link></li>
6+
<li><router-link to="/page/platform/userCreate">用户创建</router-link></li>
7+
</ul>
8+
<router-view class="aside-container"></router-view>
9+
</div>
10+
</template>
11+
12+
<style>
13+
.aside-nav {
14+
float: left;
15+
width: 100px;
16+
margin: 0 50px 0 0;
17+
padding-left: 0;
18+
}
19+
.aside-nav a {
20+
display: block;
21+
padding: 4px 0 5px;
22+
color: #555;
23+
text-align: center;
24+
text-decoration: none;
25+
}
26+
.aside-nav .router-link-active {
27+
color: #fff;
28+
background-color: orange;
29+
}
30+
.aside-container {
31+
float: left;
32+
}
33+
</style>

‎vue-demo/vue-elementUI-2.0/src/components/asideContainer/product.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<!-- 商品管理 -->
3+
<div>
4+
<ul class="aside-nav">
5+
<li><router-link to="/page/product/list">商品列表</router-link></li>
6+
<li><router-link to="/page/product/brand">商品品牌</router-link></li>
7+
</ul>
8+
<router-view class="aside-container"></router-view>
9+
</div>
10+
</template>

‎vue-demo/vue-elementUI-2.0/src/components/container/container.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="container">
3+
<header-nav></header-nav>
4+
<router-view></router-view>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import headerNav from './headerNav.vue'
10+
export default {
11+
components: {
12+
headerNav
13+
}
14+
}
15+
</script>
16+
17+
<style>
18+
header > h1 {
19+
display: inline-block;
20+
}
21+
header > a {
22+
margin: 0 10px;
23+
color: #000;
24+
text-decoration: none;
25+
}
26+
</style>

‎vue-demo/vue-elementUI-2.0/src/components/container/headerNav.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<header>
3+
<h1>管理平台</h1>
4+
<router-link to="/page/userHome">主页</router-link>
5+
<router-link to="/page/platform">平台管理</router-link>
6+
<router-link to="/page/product">商品管理</router-link>
7+
<strong>欢迎你，{{ getUsername }}</strong>
8+
</header>
9+
</template>
10+
11+
<script>
12+
import store from '../../store/store'
13+
export default {
14+
computed: {
15+
getUsername () {
16+
return store.state.username
17+
}
18+
}
19+
}
20+
</script>
21+
22+
<style>
23+
header > .router-link-active {
24+
color: red;
25+
}
26+
header > strong {
27+
padding-left: 50px;
28+
}
29+
</style>

0 commit comments

Comments
 (0)