Browserify
vue.js官方提供的browserify项目模板，可以让我们很轻松地投入到vue.js的组件开发中。熟练使用这样的模板项目，不仅将组件代码给分离出来了，使得组件可以被重复利用，而且有助于组件代码的管理。
一．Vue.js官方提供了两种类型的模板项目：
- 基于vue cli和browserify的项目模板
- 基于vue cli和webpack的项目模板
vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和完全模式，简单模式仅包含基于vue.js开发必要的一些资源和包，使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。
基于vue cli和browserify的项目模板。
Browserify是一个CommonJS风格的模块及依赖管理工具，它不仅是一个打包工具，更关键的是其JavaScript的模块及依赖管理能力。
介绍：Browserify参照了Node中的模块系统，约定用require()来引入其他模块，用module.exports来引出模块。在我看来，Browserify不同于RequireJS和Sea.js的地方在于，它没有着力去提供一个“运行时”的模块加载器，而是强调进行预编译。预编译会带来一个额外的过程，但对应的，你也不再需要遵循一定规则去加一层包裹。因此，相比较而言，Browserify提供的组织方式更简洁，也更符合CommonJS规范。
所谓vueify，就是使用.vue格式的文件定义组件，一个.vue文件就是一个组件。
在.vue文件定义的组件内容包括3部分：
- <style></style>标签：定义组件样式
- <template></template>标签：定义组件模板
- <script></script>标签：定义组件的各种选项，比如data, methods等。
二．安装vue cli
安装要求：安装vue cli需要Node.js和Git，Node.js需要4.x版本以上。我使用的是node 6.3.0版本：
执行以下命令安装vue cli npm install -g vue-cli
三．使用vue-browserify-simple模板
1.生成项目右键运行Git Bash Here---》在git bash下输入以下命令：
vue init browserify-simple my-browserify-simple-demo==》执行这个命令时，会有一些提示，一路按回车键。提示private (Y/n)时，根据需要输入Y或n，这里我输入了Y作为私有项目。---》目录下生成了一个文件夹my-browserify-simple-demo。
2.项目结构说明打开my-browserify-simple-demo文件夹，看到以下目录结构：--->打开index.html文件，注意它所引用的build.js文件并不存在，后面我会告诉你dist/build.js文件是如何生成的。
- package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：
- dependencies：项目发布时的依赖
- devDependencies：项目开发时的依赖
- scripts：编译项目的一些命令
2.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"]
}
3.安装依赖node_modules
执行以下命令安装项目依赖：cd my-browserify-simple-demo==>npm install
4. 运行示例
npm run dev==>在执行该命令后，dist目录下会生成一个build.js文件。
注意：之前我使用的node是4.4.5的版本，执行这个命令会出现一个错误：cann't find module vue-hot-reload api..，我将node.js升级到6.3.0版本后，删除node_modules文件夹，然后再次执行npm install命令重新安装依赖以后，该问题就解决了。
5. 编译过程说明
build.js文件是怎么产生的呢？我们把它分为两种情况：
- 开发时生成build.js
- 发布时生成build.js
在package.json文件的scripts节点下，有3行配置：
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
"serve": "http-server -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve"
}
npm run dev命令执行的是dev节点对应的命令npm-run-all --parallel watchify serve ，这行命令是依赖于watchify的，也就是下面这行命令：
watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js
编译src/main.js文件，然后输出到dist/build.js
serve节点的命令http-server -c 1 -a localhost用于开启http-server，http-server是一个简易的web服务器。
发布时生成build.js
执行npm run build命令可以生成发布时的build.js。uglifyjs是基于nodejs的压缩程序，用于压缩HTML/CSS/JS，执行npm run build命令后生成的build.js就是经过压缩的。
另一种：1.生成项目重新打开一个git bash窗口，执行以下命令：
vue init browserify my-browserify-demo==》目录下生成了一个文件夹my-browserify-demo：===》2. 安装依赖执行以下两行命令，安装项目依赖：cd my-browserify-demo==>npm install==>3. 运行示例执行npm run dev命令启动http-server。==>在浏览器中输入地址127.0.0.1:8080，
browserify是项目模板，my-browserify-demo是项目名称。
示例说明
注意main.js, App.vue和Hello.vue三者之间的关系。
main.js
import Vue from 'vue'这行代码表示引入vue.js，在编译时会从node_modules文件夹下寻找vue.js。
import App from './App.vue' 表示引入同目录下的App.vue组件。
App.vue
import Hello from './components/Hello.vue' 表示引入components目录下的Hello.vue组件。
Hello.vue是App.vue的子组件：
Hello.vue
Hello.vue组件没有任何依赖，它仅仅输出一段简单的文字。