其他分享
首页 > 其他分享> > vue-browserify

vue-browserify

作者:互联网

Browserify

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

一.Vue.js官方提供了两种类型的模板项目

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部分:

二.安装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个重要的节点我说明一下:

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文件是怎么产生的呢?我们把它分为两种情况:

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

 

 

 

 

 

 

 

 

 

标签:npm,vue,js,build,组件,browserify
来源: https://www.cnblogs.com/benbenjia/p/12058714.html