watchify是什么东东呢？browserify的编译是比较缓慢的，当一个browserify项目开始变大时，编译打包的时间会变得较长。watchify是一个browserify的封装，其在package.json中的配置和browserify是一样的。它可以持续件监视文件的改动，并且只重新打包必要的文件。在一个大型的项目中使用watchify，第一次打包的时候可能还会花较长时间，但是后续的编译打包将消耗较短的时间。

更多的watchify信息，请参考：https://github.com/substack/watchify/

发布时生成build.js

在理解了上述编译过程后，发布时build.js就不难理解了。

"build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"

执行npm run build命令可以生成发布时的build.js。

uglifyjs是基于nodejs的压缩程序，用于压缩HTML/CSS/JS，执行npm run build命令后生成的build.js就是经过压缩的。

使用vue-browserify模板

simple-browserify模板用于构筑基于browserify和vueify的开发环境，browserify模板则提供了更多内容：

提供了ESLint：用于格式化JavaScript和检查JavaScript代码风格。

提供了单元测试：使用PhantomJS with Karma + karma-jasmine + karma-browserify的单元测试, 支持ES2015和mock。

1.生成项目

重新打开一个git bash窗口，执行以下命令：

vue init browserify my-browserify-demo

browserify是项目模板，my-browserify-demo是项目名称。

目录下生成了一个文件夹my-browserify-demo：

文件目录结构如下：

├─.babelrc // babel配置文件 ├─.eslintrc // eslint配置文件 ├─.gitignore ├─index.html // 主页 ├─karma.conf.js // karma配置文件 ├─package.json // 项目配置文件 ├─README.md ├─dist // 发布目录 │ ├─.gitkeep ├─src // 开发目录 │ ├─App.vue // App.vue组件 │ ├─main.js // 预编译入口 │ ├─components // 组件目录 │ ├──Hello.vue // Hello.vue组件 ├─test // 单元测试目录 │ ├─unit │ ├──Hello.spec.js // Hello.vue单元测试 2. 安装依赖

执行以下两行命令，安装项目依赖：

cd my-browserify-demo npm install

（安装过程较为缓慢，需要耐心等待…）

3. 运行示例

执行npm run dev命令启动http-server。

在浏览器中输入地址127.0.0.1:8080，可以看到以下画面：

示例说明

注意main.js, App.vue和Hello.vue三者之间的关系。

main.jsimport Vue from 'vue' import App from './App.vue' /* eslint-disable no-new */ new Vue({ el: 'body', components: { App } })

import Vue from 'vue'这行代码表示引入vue.js，在编译时会从node_modules文件夹下寻找vue.js。

import App from './App.vue' 表示引入同目录下的App.vue组件。

App.vue<template> <div> <hello></hello> </div> </template> <script> import Hello from './components/Hello.vue' export default { components: { Hello } } </script> <style> body { font-family: Helvetica, sans-serif; } </style>

import Hello from './components/Hello.vue' 表示引入components目录下的Hello.vue组件。

Hello.vue是App.vue的子组件：

export default { components: { Hello } } Hello.vue<template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data () { return { // Note: modifying `msg` below will not cause changes to occur with // hot-reload. As reloaded components preserve their initial state, // modifying these values will have no effect. msg: 'Hello World!' } } } </script>

Hello.vue组件没有任何依赖，它仅仅输出一段简单的文字。

vue-browserify-simple示例

介绍完了这两种模板，我们就来做个小示例吧，下面这个示例使用的是vue-browserify-simple模板。

├─.babelrc // babel配置文件 ├─.gitignore ├─index.html // 主页 ├─package.json // 项目配置文件 ├─README.md ├─dist // 发布目录 │ ├─.gitkeep ├─src // 开发目录 │ ├─App.vue // App.vue组件 │ ├─main.js // 预编译入口 │ ├─components // 组件目录 │ ├──SimpeGrid.vue // SimpleGrid.vue组件 │ ├─assets // 静态资源文件目录 │ ├──app.css // app.css

该示例的代码我就不贴出来了，大家可以到本文开头的GitHub地址去下载。

View Demo

总结

vue.js官方提供的browserify项目模板，可以让我们很轻松地投入到vue.js的组件开发中。熟练使用这样的模板项目，不仅将组件代码给分离出来了，使得组件可以被重复利用，而且有助于组件代码的管理。