Skip to content

Commit e528029

Browse files
ba0708ba0708
committed
Initial commit
0 parents  commit e528029

File tree

7 files changed

+220
-0
lines changed

7 files changed

+220
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.idea
2+
.DS_Store

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Working with Vue.js Forms
2+
3+
This repository contains the code for the forms section from the [Vue.js: From Beginner to Professional course](https://codingexplained.com/l/github/vue-js-github).
4+
5+
## Getting up and Running
6+
7+
``` bash
8+
# Install the dependencies
9+
npm install
10+
11+
# Serve with hot reload at http://localhost:8080
12+
npm run dev
13+
14+
# Build for production with minification
15+
npm run build
16+
```

‎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>live</title>
6+
<link rel="stylesheet" href="node_modules/bootstrap/dist/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: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "live",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "Bo Andersen <ba0708@icloud.com>",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
9+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10+
},
11+
"dependencies": {
12+
"bootstrap": "^3.3.7",
13+
"vue": "^2.1.0"
14+
},
15+
"devDependencies": {
16+
"babel-core": "^6.0.0",
17+
"babel-loader": "^6.0.0",
18+
"babel-preset-es2015": "^6.0.0",
19+
"cross-env": "^3.0.0",
20+
"css-loader": "^0.25.0",
21+
"file-loader": "^0.9.0",
22+
"vue-loader": "^10.0.0",
23+
"vue-template-compiler": "^2.1.0",
24+
"webpack": "^2.2.0",
25+
"webpack-dev-server": "^2.2.0"
26+
}
27+
}

‎src/App.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div class="container">
3+
<div class="row">
4+
<div class="col-xs-12">
5+
<h1>Add Blog Post</h1>
6+
7+
<form>
8+
9+
</form>
10+
11+
<hr>
12+
13+
<table class="table table-striped">
14+
<thead>
15+
<tr>
16+
<td class="col-xs-6"><strong>Field</strong></td>
17+
<td class="col-xs-6"><strong>Value</strong></td>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr>
22+
<td>Title</td>
23+
<td>{{ post.title }}</td>
24+
</tr>
25+
<tr>
26+
<td>Content</td>
27+
<td style="white-space: pre;">{{ post.content }}</td>
28+
</tr>
29+
<tr>
30+
<td>Publish immediately</td>
31+
<td>{{ post.publishImmediately }}</td>
32+
</tr>
33+
<tr>
34+
<td>Share on</td>
35+
<td>
36+
<ul>
37+
<li v-for="media in post.shareOn">{{ media }}</li>
38+
</ul>
39+
</td>
40+
</tr>
41+
<tr>
42+
<td>Category</td>
43+
<td>{{ post.category }}</td>
44+
</tr>
45+
<tr>
46+
<td>Series</td>
47+
<td>{{ post.series }}</td>
48+
</tr>
49+
</tbody>
50+
</table>
51+
</div>
52+
</div>
53+
</div>
54+
</template>
55+
56+
<script>
57+
export default {
58+
data() {
59+
return {
60+
post: {
61+
title: '',
62+
content: '',
63+
publishImmediately: false,
64+
shareOn: [],
65+
category: '',
66+
series: ''
67+
},
68+
formData: {
69+
socialMedia: ['Facebook', 'Twitter'],
70+
categories: ['Frontend', 'Backend'],
71+
series: [
72+
'Vue.js: From Beginner to Professional',
73+
'Complete Guide to Elasticsearch'
74+
]
75+
}
76+
};
77+
}
78+
}
79+
</script>
80+
81+
<style>
82+
input[type="radio"] + label,
83+
input[type="checkbox"] + label {
84+
font-weight: normal;
85+
}
86+
</style>

‎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: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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+
loaders: {
18+
}
19+
// other vue-loader options go here
20+
}
21+
},
22+
{
23+
test: /\.js$/,
24+
loader: 'babel-loader',
25+
exclude: /node_modules/
26+
},
27+
{
28+
test: /\.(png|jpg|gif|svg)$/,
29+
loader: 'file-loader',
30+
options: {
31+
name: '[name].[ext]?[hash]'
32+
}
33+
}
34+
]
35+
},
36+
resolve: {
37+
alias: {
38+
'vue$': 'vue/dist/vue.common.js'
39+
}
40+
},
41+
devServer: {
42+
historyApiFallback: true,
43+
noInfo: true
44+
},
45+
performance: {
46+
hints: false
47+
},
48+
devtool: '#eval-source-map'
49+
}
50+
51+
if (process.env.NODE_ENV === 'production') {
52+
module.exports.devtool = '#source-map'
53+
// http://vue-loader.vuejs.org/en/workflow/production.html
54+
module.exports.plugins = (module.exports.plugins || []).concat([
55+
new webpack.DefinePlugin({
56+
'process.env': {
57+
NODE_ENV: '"production"'
58+
}
59+
}),
60+
new webpack.optimize.UglifyJsPlugin({
61+
sourceMap: true,
62+
compress: {
63+
warnings: false
64+
}
65+
}),
66+
new webpack.LoaderOptionsPlugin({
67+
minimize: true
68+
})
69+
])
70+
}

0 commit comments

Comments
 (0)