vue-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文件是如何生成的。

1. 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组件没有任何依赖，它仅仅输出一段简单的文字。