完成章节 vue 在哪？

.gitignore

@@ -1,7 +1,5 @@
 node_modules
-dist
-# 设置特例
-!dist/index.html
+dist/index.js
 .DS_Store
 .svn
 *.log

README.md

@@ -16,7 +16,7 @@
 
 ## 一个简单的页面要跑起来
 
-先准备`dist/index.html` 和 `src/index.js`静态文件，我们这一趴只把包管理搞定。
+先准备`dist/index.html` 和 `src/index.js`静态文件，我们这一趴只把包管理搞定(这里用的是webpack作为打包工具)。
 
 这里需要 npm 和 webpack 的知识，可以出门右转到[我的博客](https://longze.github.io/#!/)看相关内容。
 
@@ -47,4 +47,151 @@
 
 运行之后可以看到在 `/dist/` 下面多了一个 `index.js` 文件，恭喜恭喜，终于把包打出来了，直接在浏览器中查看 `dist/index.html`，看到了下面的页面：
 
-![页面展示-1](./img/1.png)
+![页面展示-1](./img/1.png)
+
+[0.0.2.zip](https://github.com/longze/vue2-lab/archive/0.0.2.zip)
+
+## vue 在哪？
+
+博士买驴，书券三纸，未有驴字。谢了这么多还没看见 vue 在项目代码中出现，npm 安装之后要怎么用呢？
+
+这一趴要把vue的组件化搞定。
+
+先把需要的包装上：
+
+    npm i [email protected] --save
+    npm i [email protected] --save
+    npm i [email protected] --save
+
+最简单的 vue 实例，用 render 函数绕过对模板的依赖
+
+    <div id="app"></div>
+
+    new Vue({
+        el: '#app',
+        data: {
+            name: 'test'
+        },
+        render: function (createElement) {
+            var html = createElement('div', this.name);
+            // 并非是 DOM 节点，无法添加事件
+            // html.addEventListener
+            return html;
+        }
+    });
+
+然后我们要把模板用起来，会发现报下面的错误：
+
+    Failed to mount component: template or render function not defined.
+
+vue 默认的构建方式是"runtime-only build"，这个版本不包括模板的动态编译功能，这个可能和 vue 的定位有关 -- 主要做好视图和数据的同步更新，为了和模板渲染渲染解耦，将这个功能单独放在了一个地方。这里就有了两种解决方案：
+- 用模板和数据生成dom字符串，丢弃模板渲染引擎
+- 保留模板渲染引擎，用字符串存放模板，在需要的时候再结合数据生成 dom
+
+第一种方式用在了服务器端渲染，第二种用在了前端异步渲染。解决这个问题的办法是配置别名，使用有模板编译功能的 vue[更多信息](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build)：
+
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue.common.js'
+        }
+    }
+
+模板的3种用法：
+
+第一种：
+
+html 部分：
+
+    <div id="app"></div>
+    <script type="text/x-template" id="template-id">
+        <div> {{name}} </div>
+    </script>
+
+js 部分：
+
+    new Vue({
+        el: '#app',
+        template: '#template-id',
+        data: {
+            name: 'test'
+        }
+    });
+
+这种方式适合做简单的 demo 或展示页。
+
+第二种，其实是第一种换了个姿势，模板可以通过字符串的形式存在：
+
+    new Vue({
+        el: '#app',
+        template: '<div>{{name}}</div>',
+        data: {
+            name: 'test'
+        }
+    });
+
+用这种方式可以使用第三方的模板引擎，或者配合 html 片段加载器实现 html 与 js 的分离，这种方案在实现移动端加速 amp 和 mip 可能会用到。当然 vue 提供了自己的分离方案我们下面讲。    
+
+    var template = require('./template.html.tpl');
+    new Vue({
+        el: '#app',
+        template: template,
+        data: {
+            name: 'test'
+        }
+    });
+
+第三种，使用 .vue 文件作为一个功能模块：
+
+首先是报这个错找不到 .vue 文件，其实是 loader 没有设置好，需要将 loaders 放在 module 下面，这是不经意间犯得一个错误。还要在 extensions 中添加 ".vue"，部分配置如下：
+
+    module: {
+        loaders: []
+    }
+
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue.common.js'
+        },
+        extensions: ['', '.js', '.vue']
+    },
+
+    module: {
+        loaders: [
+            {
+                test: /\.vue$/,
+                loader: 'vue'
+            }
+        ]
+    }
+
+.vue 文件的写法整体如下：
+
+    <template>
+        <div class="component-b">
+            {{name}}
+        </div>
+    </template>
+    <script>
+        module.exports = {
+            data: function () {
+                return {
+                    name: 'componentB'
+                };
+            }
+        };
+    </script>
+    <style>
+        .component-b {
+            padding: 20px;
+            text-align: center;
+            color: red;
+        }
+    </style>
+
+到目前为止终于把 vue 组件化用起来了。
+
+## 参考
+
+[Standalone-vs-Runtime-only-Build](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build)
+
+

config/webpack.config.js

@@ -5,12 +5,26 @@
 
 module.exports = {
     entry: {
-        main: '/Users/zhaoxiaoqiang/code-git/vue2-lab/src/index.js'
+        main: '../src/index.js'
     },
 
     output: {
-        path: '/Users/zhaoxiaoqiang/code-git/vue2-lab/dist/',
-        // publicPath: '/js/',
+        path: '../dist/',
         filename: 'index.js'
+    },
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue.common.js'
+        },
+        extensions: ['', '.js', '.vue']
+    },
+
+    module: {
+        loaders: [
+            {
+                test: /\.vue$/,
+                loader: 'vue'
+            }
+        ]
     }
 };

dist/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>vue2.0 实验工厂</title>
+</head>
+<body>
+<div id="app">
+    <comp-a></comp-a>
+    <comp-b></comp-b>
+</div>
+<script src="./index.js"></script>
+</body>
+</html>

package.json

@@ -20,7 +20,10 @@
     "url": "git://github.com/longze/vue2-lab.git"
   },
   "dependencies": {
+    "css-loader": "^0.26.1",
     "vue": "^2.1.4",
+    "vue-loader": "^10.0.0",
+    "vue-template-compiler": "^2.1.0",
     "webpack": "^1.14.0"
   },
   "engines": {

src/components/a/index.js

@@ -0,0 +1,12 @@
+
+var Vue = require('vue');
+var component = Vue.extend({
+    data: function () {
+        return {
+            name: 'componentA'
+        };
+    },
+    template: '<div>{{name}}</div>'
+});
+
+module.exports = component;

src/components/b/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="component-b">
+        {{name}}
+    </div>
+</template>
+<script>
+    module.exports = {
+        data: function () {
+            return {
+                name: 'componentB'
+            };
+        }
+    };
+</script>
+<style>
+    .component-b {
+        padding: 20px;
+        text-align: center;
+        color: red;
+    }
+</style>

src/index.js

@@ -3,14 +3,17 @@
  *
  * Created by zhaoxiaoqiang on 2016/12/8.
  */
-var append = require('./append.js');
+var Vue = require('vue');
+var CompA = require('./components/a');
+var CompB = require('./components/b');
 
-setTimeout(function () {
-  var body = document.getElementsByTagName('body')[0];
-  body.innerHTML = '<h1>包管理能跑起来了</h1>';
-  append.do(body, '子模块也能打到包里了');
-}, 300);
-
-module.exports = {
-  name: 'test'
-};
+new Vue({
+    el: '#app',
+    components: {
+      compA: CompA,
+      compB: CompB,
+    },
+    data: {
+        name: 'test'
+    }
+});