第一章 如何用vue.js来写一个hello world程序

1、目录结构

hello world

2、index.vue

<style>
    h2{
        color: red;
    }
</style>
<template>
    <h2>Hello, World!</h2>
</template>
<script>
    module.exports = {
        data: function(){
            return {};
        }
    }
</script>

3、入口文件main.js

var Vue = require("vue");
var hello = require("./src/index.vue");

new Vue({
    el: "body",
    components: {
        hello: hello
    }
});

4、webpack.config.js

var path = require('path');
// 定义文件的一些路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'test/hello_world');
var BUILD_PATH = path.resolve(ROOT_PATH, 'test/hello_world/dist');

module.exports = {
    debug: true,
    entry: APP_PATH+"/main.js",
    output: {
        path: BUILD_PATH,
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.(png|jpg|eot|svg|ttf|woff)/,
                loader: 'url?limit=40000'
            }
        ]
    }
}

5、在命令行执行webpack命令,生成build.js

webpack

6、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
    <hello></hello>
    <script src="build.js"></script>
</body>
</html>