Skip to content

Commit 17bb59b

Browse files
peterbatapeterbata
committed
DEC122016
0 parents  commit 17bb59b

File tree

10 files changed

+263
-0
lines changed

10 files changed

+263
-0
lines changed

‎.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+
}

‎.gitignore

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

‎README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# front
2+
3+
> A Vue.js project
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+
18+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>front</title>
6+
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="/dist/build.js"></script>
11+
</body>
12+
</html>

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "front",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "[email protected]",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
9+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10+
},
11+
"dependencies": {
12+
"vue": "^2.1.0"
13+
},
14+
"devDependencies": {
15+
"babel-core": "^6.0.0",
16+
"babel-loader": "^6.0.0",
17+
"babel-preset-es2015": "^6.0.0",
18+
"cross-env": "^3.0.0",
19+
"css-loader": "^0.25.0",
20+
"file-loader": "^0.9.0",
21+
"vue-loader": "^10.0.0",
22+
"vue-template-compiler": "^2.1.0",
23+
"webpack": "^2.1.0-beta.25",
24+
"webpack-dev-server": "^2.1.0-beta.0"
25+
}
26+
}

‎src/App.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div class="container" id="app">
3+
<navbar> </navbar>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import Navbar from './components/Navbar.vue'
9+
10+
export default {
11+
components: {
12+
'navbar': Navbar
13+
}
14+
}
15+
</script>
16+
17+
<style>
18+
/* Space out content a bit */
19+
body {
20+
padding-top: 20px;
21+
padding-bottom: 20px;
22+
}
23+
24+
/* Everything but the jumbotron gets side spacing for mobile first views */
25+
.header,
26+
.marketing,
27+
.footer {
28+
padding-right: 15px;
29+
padding-left: 15px;
30+
}
31+
32+
/* Custom page header */
33+
.header {
34+
padding-bottom: 20px;
35+
border-bottom: 1px solid #e5e5e5;
36+
}
37+
/* Make the masthead heading the same height as the navigation */
38+
.header h3 {
39+
margin-top: 0;
40+
margin-bottom: 0;
41+
line-height: 40px;
42+
}
43+
44+
/* Custom page footer */
45+
.footer {
46+
padding-top: 19px;
47+
color: #777;
48+
border-top: 1px solid #e5e5e5;
49+
}
50+
51+
/* Customize container */
52+
@media (min-width: 768px) {
53+
.container {
54+
max-width: 730px;
55+
}
56+
}
57+
.container-narrow > hr {
58+
margin: 30px 0;
59+
}
60+
61+
/* Main marketing message and sign up button */
62+
.jumbotron {
63+
text-align: center;
64+
border-bottom: 1px solid #e5e5e5;
65+
}
66+
.jumbotron .btn {
67+
padding: 14px 24px;
68+
font-size: 21px;
69+
}
70+
71+
/* Supporting marketing content */
72+
.marketing {
73+
margin: 40px 0;
74+
}
75+
.marketing p + h4 {
76+
margin-top: 28px;
77+
}
78+
79+
/* Responsive: Portrait tablets and up */
80+
@media screen and (min-width: 768px) {
81+
/* Remove the padding we set earlier */
82+
.header,
83+
.marketing,
84+
.footer {
85+
padding-right: 0;
86+
padding-left: 0;
87+
}
88+
/* Space out the masthead */
89+
.header {
90+
margin-bottom: 30px;
91+
}
92+
/* Remove the bottom border on the jumbotron for visual effect */
93+
.jumbotron {
94+
border-bottom: 0;
95+
}
96+
}
97+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/Navbar.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="header clearfix">
3+
<nav>
4+
<ul class="nav nav-pills pull-right">
5+
<li role="presentation" class="active"><a href="#">Home</a></li>
6+
<li role="presentation"><a href="#">About</a></li>
7+
<li role="presentation"><a href="#">Contact</a></li>
8+
</ul>
9+
</nav>
10+
<h3 class="text-muted">Project name</h3>
11+
</div>
12+
</template>
13+
14+
15+
<script>
16+
17+
</script>
18+
19+
20+
<style>
21+
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
22+
</style>
23+
24+
25+
26+
27+
28+
29+

‎src/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
new Vue({
5+
el: '#app',
6+
render: h => h(App)
7+
})

‎webpack.config.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.vue$/,
15+
loader: 'vue-loader',
16+
options: {
17+
// vue-loader options go here
18+
}
19+
},
20+
{
21+
test: /\.js$/,
22+
loader: 'babel-loader',
23+
exclude: /node_modules/
24+
},
25+
{
26+
test: /\.(png|jpg|gif|svg)$/,
27+
loader: 'file-loader',
28+
options: {
29+
name: '[name].[ext]?[hash]'
30+
}
31+
}
32+
]
33+
},
34+
resolve: {
35+
alias: {
36+
'vue$': 'vue/dist/vue.common.js'
37+
}
38+
},
39+
devServer: {
40+
historyApiFallback: true,
41+
noInfo: true
42+
},
43+
devtool: '#eval-source-map'
44+
}
45+
46+
if (process.env.NODE_ENV === 'production') {
47+
module.exports.devtool = '#source-map'
48+
// http://vue-loader.vuejs.org/en/workflow/production.html
49+
module.exports.plugins = (module.exports.plugins || []).concat([
50+
new webpack.DefinePlugin({
51+
'process.env': {
52+
NODE_ENV: '"production"'
53+
}
54+
}),
55+
new webpack.optimize.UglifyJsPlugin({
56+
sourceMap: true,
57+
compress: {
58+
warnings: false
59+
}
60+
}),
61+
new webpack.LoaderOptionsPlugin({
62+
minimize: true
63+
})
64+
])
65+
}

0 commit comments

Comments
 (0)