Skip to content
This repository was archived by the owner on Sep 25, 2023. It is now read-only.

Commit 0f7ceae

Browse files
brandonxiangbrandonxiang
committed
init
0 parents  commit 0f7ceae

File tree

9 files changed

+223
-0
lines changed

9 files changed

+223
-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": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"],
4+
"comments": false
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+
# test-vue-webpack
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: 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>test-vue-webpack</title>
6+
</head>
7+
<body>
8+
<app></app>
9+
<script src="dist/build.js"></script>
10+
</body>
11+
</html>

‎package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "test-vue-webpack",
3+
"description": "A Vue.js project",
4+
"author": "brandonxiang",
5+
"private": true,
6+
"scripts": {
7+
"dev": "webpack-dev-server --inline --hot",
8+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
9+
},
10+
"dependencies": {
11+
"babel-runtime": "^5.8.0",
12+
"leaflet": "^0.7.7",
13+
"vue": "^1.0.0"
14+
},
15+
"devDependencies": {
16+
"babel-core": "^6.0.0",
17+
"babel-loader": "^6.0.0",
18+
"babel-plugin-transform-runtime": "^6.0.0",
19+
"babel-preset-es2015": "^6.0.0",
20+
"babel-preset-stage-2": "^6.0.0",
21+
"cross-env": "^1.0.6",
22+
"css-loader": "^0.23.0",
23+
"file-loader": "^0.8.4",
24+
"json-loader": "^0.5.4",
25+
"url-loader": "^0.5.7",
26+
"vue-hot-reload-api": "^1.2.0",
27+
"vue-html-loader": "^1.0.0",
28+
"vue-loader": "^8.2.1",
29+
"vue-style-loader": "^1.0.0",
30+
"webpack": "^1.12.2",
31+
"webpack-dev-server": "^1.12.0"
32+
}
33+
}

‎src/App.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div id="app">
3+
<h1>{{ msg }}</h1>
4+
<ul id="example-1">
5+
<li v-for="item in items">
6+
{{msg}} - {{$index}} - {{item.message}}
7+
</li>
8+
</ul>
9+
<div>
10+
<span v-for="n in 10">{{ n }} </span>
11+
</div>
12+
<input type="checkbox" id="checkbox" v-model="checked">
13+
<label for="checkbox">{{ checked }}</label>
14+
<input v-model="age" number>
15+
<span>{{age}}</span>
16+
</div>
17+
<div v-if="show" :transition="transitionName">hello</div>
18+
19+
<button @click="changeShow">toggle</button>
20+
<leaflet message="chuan"></leaflet>
21+
</template>
22+
23+
<script>
24+
import leaflet from './leaflet.vue';
25+
export default {
26+
data () {
27+
return {
28+
// note: changing this line won't causes changes
29+
// with hot-reload because the reloaded component
30+
// preserves its current state and we are modifying
31+
// its initial state.
32+
msg: 'Hello Vue!',
33+
items:[
34+
{message:'Foso'},
35+
{message:'Bar'}
36+
],
37+
checked: true,
38+
age:8,
39+
show:false,
40+
transitionName: 'fade'
41+
}
42+
},
43+
methods:{
44+
changeShow:function(){
45+
this.show = !this.show;
46+
}
47+
},
48+
components: { leaflet }
49+
}
50+
51+
52+
53+
</script>
54+
55+
<style>
56+
body {
57+
font-family: Helvetica, sans-serif;
58+
}
59+
</style>

‎src/leaflet.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>{{message}}</div>
3+
<h2>{{example}}</h2>
4+
</template>
5+
6+
<script type="text/javascript">
7+
export default{
8+
data(){
9+
return{
10+
name:'leaflet'
11+
}
12+
},
13+
computed:{
14+
example:function(){
15+
return Date.now() + this.name;
16+
}
17+
},
18+
props:['message']
19+
}
20+
</script>

‎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+
var example1 = new Vue({
5+
el: 'body',
6+
components: { App }
7+
});

‎webpack.config.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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+
resolveLoader: {
12+
root: path.join(__dirname, 'node_modules'),
13+
},
14+
module: {
15+
loaders: [
16+
{
17+
test: /\.vue$/,
18+
loader: 'vue'
19+
},
20+
{
21+
test: /\.js$/,
22+
loader: 'babel',
23+
exclude: /node_modules/
24+
},
25+
{
26+
test: /\.json$/,
27+
loader: 'json'
28+
},
29+
{
30+
test: /\.html$/,
31+
loader: 'vue-html'
32+
},
33+
{
34+
test: /\.(png|jpg|gif|svg)$/,
35+
loader: 'url',
36+
query: {
37+
limit: 10000,
38+
name: '[name].[ext]?[hash]'
39+
}
40+
}
41+
]
42+
},
43+
devServer: {
44+
historyApiFallback: true,
45+
noInfo: true
46+
},
47+
devtool: '#eval-source-map'
48+
}
49+
50+
if (process.env.NODE_ENV === 'production') {
51+
module.exports.devtool = '#source-map'
52+
// http://vuejs.github.io/vue-loader/workflow/production.html
53+
module.exports.plugins = (module.exports.plugins || []).concat([
54+
new webpack.DefinePlugin({
55+
'process.env': {
56+
NODE_ENV: '"production"'
57+
}
58+
}),
59+
new webpack.optimize.UglifyJsPlugin({
60+
compress: {
61+
warnings: false
62+
}
63+
}),
64+
new webpack.optimize.OccurenceOrderPlugin()
65+
])
66+
}

0 commit comments

Comments
 (0)