webpack+vue.js实现组件化详解


Posted in Javascript onOctober 12, 2016

简介

在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了。

建立vue组件

在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下:

|--dist    //webpack打包后生成的文件夹
| |--build.js
|--node_modules  //项目的依赖所在的文件夹
|--src    //文件入口
| |--components //组件存放文件夹
|  |--app.vue //组件
| |--main.js  //主js文件
|--index.html  //主html文件
|--package.json
|--webpack.config.js //webpack配置文件

首先在index.hmtl中写入代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue example</title>
</head>
<body>
 <app></app>
 <script src="dist/build.js"></script>
</body>
</html>

在编辑器中打开app.vue文件,写入如下代码:

<template>
<div class="message">{{msg}}</div> 
</template>
<script>
export default {
 data () {
 return {
  msg: 'Hello from vue-loader'
 }
 }
}
</script>
<style>
.message{
 color:red;
 font-size:36px;
 font-weight:blod;
}
</style>

在main.js中写入:

import Vue from 'vue'
import App from './components/app.vue'
new Vue({
 el: 'body',
 components:{App}
});

这样运行命令webpack就可以看到效果了

这里用到了ES6的模块儿—importexport

export命令

export命令用于规定模块的对外接口。一个模块就是一个独立文件。该文件内的所有变量外部都无法获取。如果希望外部能够读取模块内部的某个变量,就必须使用export关键字对外暴露出该变量。例如:

//export.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

这样就可以对外输出三个变量。

import命令

使用export对外暴露了接口后,其他js文件通过import命令加载这个模块文件。上面暴露的三个变量在另一个js文件中引入如下:

//import.js
import {firstName,lastName,year} from './export';
function setName(element){
 element.textContent = firstName + ' ' + lastName;
}

webpack的hot-reload

前端自动刷新现在已经很常见了,即改变页面后,浏览器自动刷新,但是这个功能在我们做单页面应用时候会很不好用,所以,webpack支持hot-reload(热替换),当我们修改模块时候不会页面不会刷新,会直接在页面中生效。

hot-reload的基础—webpack-dev-server

webpack-dev-server支持两种模式的自动刷新页面:

     iframe模式(页面嵌入一个iframe并在其中呈现页面的变化)

     inline模式(一个小型的webpack-dev-server客户端会作为入口文件打包,这个客户端会在后端代码改变的时候刷新页面)

iframe模式

使用iframe模式无需额外的配置,在dos下输入命令

$ webpack-dev-server

在浏览器中输入 http://loacalhost:8080/webpack-dev-server/index.html

inline模式

在dos下输入命令

$ webpack-dev-server --inline --hot

启动服务器,在浏览器中打开 http://loacalhost:8080 就可以看到我们的页面,此时修改app.vue中的css,以及html中的文字,都可以看到在浏览器中立马呈现。

关于webpack-dev-server的详细说明,可以参考官方文档或者博客WEBPACK DEV SERVER。

这里有一个问题需要说明下

在很多文章中都说,修改app.vue文件中script标签中的msg文字,会在浏览器中立即呈现效果,但是事实上我在做demo的时候并没有出现这个效果,Google了很多,找到了答案,尤大说:“data是初始值,但热更新的时候会保留当前状态”。

至此,关于webpack+vue的基本结束,虽然简单,但是由于在这个过程中也遇到一些坑,所以总结下,关于对vue的研究,这才只是个开始…

附:

我的webpack配置文件:

var path = require('path');
module.exports = {
 entry: './src/main.js',
 output: {
 path: './dist',
 publicPath:'dist/',
 filename: 'build.js'
 },
 //配置自动刷新,如果打开会使浏览器刷新而不是热替换
 /*devServer: {
 historyApiFallback: true,
 hot: false,
 inline: true,
 grogress: true
 },*/
 module: {
 loaders: [
  //转化ES6语法
  {
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules/
  },
  //解析.vue文件
  {
  test:/\.vue$/,
  loader:'vue'
  },
  //图片转化,小于8K自动转化为base64的编码
  {
  test: /\.(png|jpg|gif)$/,
  loader:'url-loader?limit=8192'
  }
 ]
 },
 vue:{
 loaders:{
  js:'babel'
 }
 },
 resolve: {
  // require时省略的扩展名,如:require('app') 不需要app.js
  extensions: ['', '.js', '.vue'],
  // 别名,可以直接使用别名来代表设定的路径以及其他
  alias: {
   filter: path.join(__dirname, './src/filters'),
   components: path.join(__dirname, './src/components')
  }
 } 
}

package.json文件:

{
 "name": "webpackvue",
 "version": "1.0.0",
 "description": "",
 "main": "vue.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.9.1",
 "babel-loader": "^6.2.4",
 "babel-plugin-transform-runtime": "^6.9.0",
 "babel-preset-es2015": "^6.9.0",
 "babel-preset-stage-0": "^6.5.0",
 "babel-runtime": "^6.9.2",
 "css-loader": "^0.23.1",
 "file-loader": "^0.8.5",
 "style-loader": "^0.13.1",
 "url-loader": "^0.5.7",
 "vue":"^1.0.24",
 "vue-router":"^0.7.13",
 "vue-hot-reload-api": "^1.3.2",
 "vue-html-loader": "^1.2.2",
 "vue-loader": "^8.5.2",
 "vue-style-loader": "^1.0.0",
 "webpack": "^1.13.1",
 "webpack-dev-server": "^1.14.1",
 "webpack-merge": "^0.13.0"
 }
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 #Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 #Javascript
JS禁止查看网页源代码的实现方法
Oct 12 #Javascript
webpack+vue.js快速入门教程
Oct 12 #Javascript
jquery 抽奖小程序实现代码
Oct 12 #Javascript
微信js-sdk地理位置接口用法示例
Oct 12 #Javascript
vue.js表格组件开发的实例详解
Oct 12 #Javascript
You might like
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python冒泡排序简单实现方法
2015/07/09 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
实例介绍Python中整型
2019/02/11 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
财务会计实习报告体会
2013/12/20 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
高考励志标语
2014/06/05 职场文书
股东授权委托书范文
2014/09/13 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python