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 动态设置已知select的option的value值的代码
Dec 16 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
vuex进阶知识点巩固
May 20 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
js实现日历
Nov 07 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python re.match()用法相关示例
2021/01/27 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
六一儿童节活动策划方案
2014/01/27 职场文书
物业总经理岗位职责
2014/02/28 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
临床医学专业求职信
2014/08/08 职场文书
文化大革命观后感
2015/06/17 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python