Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Sep 25, 2023. It is now read-only.

Commit 751e695

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /