Skip to content

Commit 793a95b

Browse files
webLiangwebLiang
committed
first commit
0 parents  commit 793a95b

File tree

11 files changed

+318
-0
lines changed

11 files changed

+318
-0
lines changed

‎README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# my-project
2+
3+
> aa
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
17+
# build for production and view the bundle analyzer report
18+
npm run build --report
19+
```
20+
21+
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22+
# sell

‎src/App.vue

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div id="app">
3+
<div class="main">
4+
<ul class="liang">
5+
<router-link to='/liang'>
6+
<li>商品</li>
7+
</router-link>
8+
<router-link to='/liang2'>
9+
<li>评论</li>
10+
</router-link>
11+
<router-link to='/liang3'>
12+
<li>商家</li>
13+
</router-link>
14+
<router-view class='view'></router-view>
15+
</ul>
16+
17+
</div>
18+
19+
20+
</div>
21+
</template>
22+
23+
<script>
24+
// import myLiang from './components.liang.vue'
25+
// export default {
26+
// //2.然后,在components中写入子组件
27+
// components: {myLiang}
28+
// }
29+
// export default {
30+
// name: 'App'
31+
// }
32+
</script>
33+
34+
<style>
35+
#app {
36+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
37+
-webkit-font-smoothing: antialiased;
38+
-moz-osx-font-smoothing: grayscale;
39+
text-align: center;
40+
color: #2c3e50;
41+
margin: 0px auto;
42+
position: absolute;
43+
left: 50%;
44+
}
45+
.main{position: relative;}
46+
#app .liang{
47+
position: absolute;
48+
width: 150px;
49+
margin-left:-150px;
50+
51+
52+
53+
}
54+
#app .liang li{
55+
float: left;
56+
display: inline;
57+
width: 50px;
58+
text-align: center;
59+
}
60+
#app.view {
61+
clear: both;
62+
display: inline;
63+
width: 50px;
64+
}
65+
.router-link-active{
66+
color: red;
67+
}
68+
</style>

‎src/Schart.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
4+
</div>
5+
</template>
6+
<script>
7+
import Schart from 'vue-schart';
8+
export default {
9+
data() {
10+
return {
11+
canvasId: 'myCanvas',
12+
type: 'bar',
13+
data: [
14+
{name: '2014', value: 1342},
15+
{name: '2015', value: 2123},
16+
{name: '2016', value: 1654},
17+
{name: '2017', value: 1795},
18+
],
19+
options: {
20+
title: 'Total sales of stores in recent years'
21+
}
22+
}
23+
},
24+
components:{
25+
Schart
26+
}
27+
}
28+
</script>
29+
30+
<style>
31+
.wrapper{
32+
width: 300px;
33+
height: 200px;
34+
}
35+
</style>

‎src/Schart2.vue

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div class="hello">
3+
<schart :canvasId="canvasId" :type="type" :width="width"
4+
:height="height" :data="data" :options="options"></schart>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import Schart from 'vue-schart';
10+
export default {
11+
data() {
12+
return {
13+
canvasId: 'myCanvas',
14+
type: 'line',
15+
width: 300,
16+
height: 400,
17+
data: [
18+
{name: '2014', value: 1342},
19+
{name: '2015', value: 2123},
20+
{name: '2016', value: 1654},
21+
{name: '2017', value: 1795},
22+
],
23+
options: {
24+
padding: 37, // canvas 内边距
25+
bgColor: '#fff', // 默认背景颜色
26+
title: 'vue-schart互动演示案例',// 图表标题
27+
titleColor: '#000000', // 图表标题颜色
28+
titlePosition: 'top' , // 图表标题位置: top / bottom
29+
yEqual: 5, // y轴分成5等分
30+
fillColor: '#1E9FFF', // 默认填充颜色
31+
contentColor: '#eeeeee', // 内容横线颜色
32+
axisColor: '#666666', // 坐标轴颜色
33+
34+
}
35+
}
36+
},
37+
components:{
38+
Schart
39+
}
40+
}
41+
</script>
42+
43+
<!-- Add "scoped" attribute to limit CSS to this component only -->
44+
<style>
45+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/HelloWorld.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'HelloWorld',
10+
data () {
11+
return {
12+
msg: 'Hello 再一次搭建'
13+
}
14+
}
15+
}
16+
</script>
17+
18+
<!-- Add "scoped" attribute to limit CSS to this component only -->
19+
<style scoped>
20+
h1, h2 {
21+
font-weight: normal;
22+
}
23+
ul {
24+
list-style-type: none;
25+
padding: 0;
26+
}
27+
li {
28+
display: inline-block;
29+
margin: 0 10px;
30+
}
31+
a {
32+
color: #42b983;
33+
}
34+
</style>

‎src/components/liang.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="hello">
3+
<h1>HelloLiang1商品组件</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import axios from 'axios'
9+
export default {
10+
mounted: function () {
11+
axios.get('http://music.163.com/api/playlist/detail?id=19723756')
12+
.then(function (res) {
13+
console.log(res)
14+
}, function (error) {
15+
console.log(error)
16+
})
17+
}
18+
19+
}
20+
</script>
21+
22+
<!-- Add "scoped" attribute to limit CSS to this component only -->
23+
<style>
24+
</style>

‎src/components/liang2.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div class="hello">
3+
<h1>Liang2评论</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
}
10+
</script>
11+
12+
<!-- Add "scoped" attribute to limit CSS to this component only -->
13+
<style>
14+
</style>

‎src/components/liang3.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div class="hello">
3+
<h1>Liang3商家</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
}
10+
</script>
11+
12+
<!-- Add "scoped" attribute to limit CSS to this component only -->
13+
<style>
14+
</style>

‎src/main.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// The Vue build version to load with the `import` command
2+
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3+
import Vue from 'vue'
4+
import App from './App'
5+
import router from './router'
6+
import axios from 'axios'
7+
import Schart from './Schart'
8+
import Schart2 from './Schart2'
9+
//Vue.prototype.$http = axios;
10+
// import ElementUI from 'element-ui'
11+
// import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
12+
// Vue.use(ElementUI);
13+
//import myLiang from './components/liang'
14+
import ElementUI from 'element-ui';
15+
import 'element-ui/lib/theme-chalk/index.css';
16+
17+
Vue.use(ElementUI);
18+
Vue.config.productionTip = false
19+
20+
/* eslint-disable no-new */
21+
new Vue({
22+
el: '#app',
23+
router,
24+
render: h => h(Schart2)
25+
// components: { App },
26+
// template: '<App/>'
27+
})

‎src/router/index.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Vue from 'vue'
2+
import Router from 'vue-router'
3+
import HelloWorld from '@/components/HelloWorld'
4+
import liang from '@/components/liang'
5+
import liang2 from '@/components/liang2'
6+
import liang3 from '@/components/liang3'
7+
Vue.use(Router)
8+
9+
export default new Router({
10+
mode:'history',
11+
routes: [
12+
{
13+
path: '/',
14+
redirect:'/liang',
15+
name: 'HelloWorld',
16+
component: HelloWorld
17+
},
18+
{
19+
path:'/liang',
20+
name :'liang',
21+
component:liang
22+
},
23+
{
24+
path:'/liang2',
25+
name :'liang2',
26+
component:liang2
27+
},
28+
{
29+
path:'/liang3',
30+
name :'liang3',
31+
component:liang3
32+
}
33+
]
34+
})
35+

0 commit comments

Comments
 (0)