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

Commit 751e695

Browse files
brandonxiangbrandonxiang
committed
step 3
1 parent 8881b56 commit 751e695

File tree

5 files changed

+88
-64
lines changed

5 files changed

+88
-64
lines changed

‎index.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
45
<meta charset="utf-8">
56
<title>Vue Example</title>
6-
</head>
7-
<body>
8-
<h3>{{ message }}</h3>
7+
</head>
8+
9+
<body>
10+
<app></app>
911
<script src="dist/build.js"></script>
10-
</body>
12+
</body>
13+
1114
</html>

‎package.json‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
{
2-
"name": "test-vue-webpack",
3-
"version": "1.0.0",
4-
"description": "A Vue.js project",
5-
"main": "src/main.js",
6-
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
8-
},
9-
"repository": {
10-
"type": "git",
11-
"url": "git+https://github.com/brandonxiang/example-vue-webpack.git"
12-
},
13-
"keywords": [
14-
"vue",
15-
"webpack"
16-
],
17-
"author": "brandonxiang",
18-
"license": "MIT",
19-
"bugs": {
20-
"url": "https://github.com/brandonxiang/example-vue-webpack/issues"
21-
},
22-
"homepage": "https://github.com/brandonxiang/example-vue-webpack#readme",
23-
"devDependencies": {
24-
"babel-core": "^6.1.2",
25-
"babel-loader": "^6.1.0",
26-
"babel-plugin-transform-runtime": "^6.1.2",
27-
"babel-preset-es2015": "^6.1.2",
28-
"babel-preset-stage-0": "^6.1.2",
29-
"babel-runtime": "^5.8.0",
30-
"webpack": "^1.12.2"
31-
},
32-
"dependencies": {
33-
"vue": "^1.0.26"
34-
}
2+
"name": "test-vue-webpack",
3+
"version": "1.0.0",
4+
"description": "A Vue.js project",
5+
"main": "src/main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/brandonxiang/example-vue-webpack.git"
12+
},
13+
"keywords": [
14+
"vue",
15+
"webpack"
16+
],
17+
"author": "brandonxiang",
18+
"license": "MIT",
19+
"bugs": {
20+
"url": "https://github.com/brandonxiang/example-vue-webpack/issues"
21+
},
22+
"homepage": "https://github.com/brandonxiang/example-vue-webpack#readme",
23+
"devDependencies": {
24+
"babel-core": "^6.1.2",
25+
"babel-loader": "^6.1.0",
26+
"babel-plugin-transform-runtime": "^6.1.2",
27+
"babel-preset-es2015": "^6.1.2",
28+
"babel-preset-stage-0": "^6.1.2",
29+
"babel-runtime": "^5.8.0",
30+
"webpack": "^1.12.2",
31+
"css-loader": "^0.23.0",
32+
"style-loader": "^0.13.0",
33+
"vue-loader": "^7.3.0",
34+
"vue-html-loader": "^1.0.0"
35+
},
36+
"dependencies": {
37+
"vue": "^1.0.26"
38+
}
3539
}

‎src/app.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div class="message">{{ msg }}</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
data () {
8+
return {
9+
msg: 'Hello from vue-loader!'
10+
}
11+
}
12+
}
13+
</script>
14+
15+
<style>
16+
.message {
17+
color: blue;
18+
}
19+
</style>

‎src/main.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import Vue from 'vue'
2+
import App from './app.vue'
23

34
new Vue({
4-
el: 'body',
5-
data: {
6-
message: "Hello Vue"
7-
}
5+
el: 'body',
6+
components: { App }
87
})

‎webpack.config.js‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
module.exports = {
2-
// 这是一个主文件包括其他模块
3-
entry: './src/main.js',
4-
// 编译的文件路径
5-
output: {
6-
//`dist`文件夹
7-
path: './dist',
8-
// 文件 `build.js` 即 dist/build.js
9-
filename: 'build.js'
10-
},
11-
module: {
12-
// 一些特定的编译规则
13-
loaders: [
14-
{
15-
// 让webpack去验证文件是否是.js结尾将其转换
16-
test: /\.js$/,
17-
// 通过babel转换
18-
loader: 'babel',
19-
// 不用转换的node_modules文件夹
20-
exclude: /node_modules/
21-
}
22-
]
23-
}
2+
entry: './src/main.js',
3+
output: {
4+
path: './dist',
5+
publicPath: 'dist/',
6+
filename: 'build.js'
7+
},
8+
module: {
9+
loaders: [{
10+
test: /\.js$/,
11+
loader: 'babel',
12+
exclude: /node_modules/
13+
}, {
14+
test: /\.vue$/,
15+
loader: 'vue'
16+
}]
17+
},
18+
vue: {
19+
loaders: {
20+
js: 'babel'
21+
}
22+
}
2423
}

0 commit comments

Comments
 (0)