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的函数重名看其初始化方式
Mar 08 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
简单谈谈javascript高级特性
Sep 04 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 VS ASP
2006/10/09 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
西式婚礼证婚词
2014/01/12 职场文书
九年级英语教学反思
2014/01/31 职场文书
公务员转正考察材料
2014/02/07 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL