Skip to content

Commit af8b21c

Browse files
jetfueljetfuel
authored
Initial checking to setup Vue basic requirements. (#264)
Add App.vue Add AppMenu.vue
1 parent 1574cc0 commit af8b21c

File tree

5 files changed

+146
-25
lines changed

5 files changed

+146
-25
lines changed

‎frontend/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"node": ">= 6.4.0"
1313
},
1414
"dependencies": {
15+
"vue": "^2.5.2",
16+
"vue-router": "^3.0.1",
1517
"axios": "^0.16.1",
1618
"csshint": "^0.3.3",
1719
"d3-format": "^1.2.1",
@@ -72,6 +74,10 @@
7274
"webpack-dev-server": "^2.4.2",
7375
"webpack-hot-middleware": "^2.19.1",
7476
"webpack-merge": "^4.1.0",
75-
"yargs": "^8.0.2"
77+
"yargs": "^8.0.2",
78+
"vue-jest": "^1.0.2",
79+
"vue-loader": "^13.3.0",
80+
"vue-style-loader": "^3.0.1",
81+
"vue-template-compiler": "^2.5.2"
7682
}
7783
}

‎frontend/src/App.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div id="app">
3+
<AppMenu>
4+
</AppMenu>
5+
6+
<router-view></router-view>
7+
</div>
8+
9+
</template>
10+
11+
<script>
12+
import AppMenu from './common/component/AppMenu'
13+
14+
export default {
15+
name: 'App',
16+
components: {
17+
AppMenu
18+
}
19+
}
20+
</script>
21+
22+
<style>
23+
#app {
24+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
25+
-webkit-font-smoothing: antialiased;
26+
-moz-osx-font-smoothing: grayscale;
27+
text-align: center;
28+
color: #2c3e50;
29+
margin-top: 60px;
30+
}
31+
</style>
32+

‎frontend/src/common/component/AppMenu.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div>
3+
AppMenu goes here
4+
<p>{{ msg }} </p>
5+
6+
<div class="visual-dl-app-menu">
7+
<!--<san-appbar title=" ">-->
8+
<!--<san-menu slot="right">-->
9+
<!--<san-menu-item-->
10+
<!--s-for="item in items"-->
11+
<!--class="{{selected === item.name ? 'sm-menu-item-selected' : ''}}"-->
12+
<!--on-click="handleItemClick(item)"-->
13+
<!--title="{{item.title}}" />-->
14+
<!--</san-menu>-->
15+
<!--</san-appbar>-->
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'AppMenu',
23+
data () {
24+
return {
25+
msg: 'Welcome to Your App Menu'
26+
}
27+
}
28+
}
29+
</script>
30+
31+
<style>
32+
+prefix-classes(prefix)
33+
.app-menu
34+
width 100%
35+
36+
.visual-dl-app-menu
37+
.sm-appbar-title
38+
font-size 24px
39+
flex none
40+
margin-right 50px
41+
.sm-appbar-title
42+
background url('./visualdl-logo.png') no-repeat
43+
background-size cover
44+
width 120px
45+
height 50px
46+
.sm-appbar-right
47+
width 100%
48+
.sm-menu
49+
width 100%
50+
height 100%
51+
display flex
52+
flex-direction row
53+
.sm-menu-item
54+
padding 0 30px
55+
.sm-menu-item-content
56+
color #fff
57+
opacity 0.6
58+
.sm-menu-item:hover
59+
background none
60+
opacity 1
61+
.sm-menu-item-selected
62+
.sm-menu-item-content
63+
color #fff
64+
opacity 1
65+
</style>

‎frontend/src/index.js‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,38 @@
1-
import 'normalize.css/normalize.css';
2-
import 'san-mui/index.css';
3-
import './common/component/ui-common.styl';
1+
//import 'normalize.css/normalize.css';
2+
//import 'san-mui/index.css';
3+
//import './common/component/ui-common.styl';
4+
//
5+
//import './home/index';
6+
//import './scalars/index';
7+
//import './images/index';
8+
//import './histogram/index';
9+
//import './graph/index';
10+
//
11+
//import App from './App';
12+
//new App({
13+
// data: {
14+
// titleName: 'VisualDL'
15+
// }
16+
//}).attach(document.getElementById('root'));
17+
//
18+
//var vm = new Vue({
19+
// el: "#root",
20+
//
21+
//})
422

5-
import './home/index';
6-
import './scalars/index';
7-
import './images/index';
8-
import './histogram/index';
9-
import './graph/index';
1023

11-
import App from './App';
12-
new App({
13-
data: {
14-
titleName: 'VisualDL'
15-
}
16-
}).attach(document.getElementById('root'));
24+
25+
// The Vue build version to load with the `import` command
26+
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
27+
import Vue from 'vue'
28+
import App from './App'
29+
import AppMenu from '@/common/component/AppMenu'
30+
31+
Vue.config.productionTip = false
32+
33+
/* eslint-disable no-new */
34+
new Vue({
35+
el: '#root',
36+
components: { App },
37+
template: '<App/>',
38+
})

‎frontend/tool/webpack.config.js‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,12 @@ const config = {
4646
resolve: {
4747

4848
alias: {
49-
'san-mui': 'san-mui/lib',
50-
axios: 'axios/dist/axios.min.js'
49+
axios: 'axios/dist/axios.min.js',
50+
'vue$': 'vue/dist/vue.esm.js',
51+
'@': path.resolve(projectPath, 'src'),
5152
},
5253

53-
extensions: ['.js', '.json', '.styl', '.css', '.html', '.san']
54+
extensions: ['.js', '.json', '.styl', '.css', '.html', '.vue']
5455
},
5556

5657
module: {
@@ -59,13 +60,8 @@ const config = {
5960
],
6061
rules: [
6162
{
62-
test: /\.san$/,
63-
loader: 'san-loader',
64-
options: {
65-
loaders: {
66-
stylus: getLoaders(isDev, 'stylus')
67-
}
68-
}
63+
test: /\.vue$/,
64+
loader: 'vue-loader',
6965
},
7066
{
7167
test: /\.js$/,

0 commit comments

Comments
 (0)