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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
jQuery技巧总结
Jan 01 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
原生js二级联动效果
Jun 20 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
JavaScript中的null和undefined用法解析
Sep 30 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+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
页面版文本框智能提示JS代码
2009/11/20 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
JS实现简单打字测试
2020/06/24 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Python 开发Activex组件方法
2009/11/08 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
九州传奇上机题
2014/07/10 面试题
计算机大学生的自我评价
2013/10/15 职场文书
小学毕业感言50字
2014/02/16 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2014年项目工作总结
2014/11/24 职场文书
2015年三万活动总结
2015/03/25 职场文书
社区活动总结范文
2015/05/07 职场文书
《花钟》教学反思
2016/02/17 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python