利用webpack和vue实现组件化
原文链接:http://mrzhang123.github.io/2016/06/02/webpack-vue-3/
本文基于vue1.x
基于vue2.x&webpack2.x
请移步至
Vue2.x踩坑与总结
Webpack2.x踩坑与总结
上一篇webpack+vue起步我们实现了用webpack打包vue的最基本用法,这篇我们将利用webpack+vue实现组件化
在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的模块儿---import
,export
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模式无需额外的配置,在终端输入命令
$ 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.jsextensions: ['', '.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"}
}
利用webpack和vue实现组件化相关推荐
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
- vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面 文章目录 vue使用组件化思想实现一个简单的购物车页面 页面预览 项目结构 组件介绍 主页面ShopCar Header组件 Goods组件 Count组 ...
- Vue——Vue的组件化
Vue--邂逅Vue Vue--Vue的基础语法 Vue--Vue的组件化 Vue--slot_插槽的基本使用 文章目录 1:组件化的介绍和使用 2:组件步骤解析 3:全局组件和局部组件 4:父组件和 ...
- VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
- Vue(组件化编程:非单文件组件、单文件组件)
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件 组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
- Vue.js 组件化开发
三.组件化开发 1.1 组件化的实现和使用步骤 组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件语法糖 1.5 组件模板抽离的写法 1.6 组件数据存放 1.7 ...
- Vue/React组件化开发的一些思考
组件化开发的优势 组件化开发利用了面向对象的威力,易于构建规模比较大的应用并且获得比较高的可维护性,可扩展性.Vue.React厂商及社区不但提供了组件化开发的框架,而且提供了易于起步并包含了从编码. ...
- 第三天:Vue的组件化
1.认识组件化 我们将一个完整的页面分成很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进行细分. 组件化是Vuejs中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用 ...
- vue的组件化+父子组件的通信
文章目录 1.注册组件的基本步骤 1.1 原始的创建方法 1.2语法糖创建方法 2.全局组件与局部组件 2.1 全局组件 2.2 局部组件 2.3语法糖局部组件(最简写法) 3. 父子组件 4.组件中 ...
最新文章
- 节能原理 复习(能量平衡+热电联产+联合循环)
- 比较正宗的验证邮箱的正则表达式js代码详解
- ios刷android8.0,颤抖吧 iOS, Android 8.0正式发布!
- 【RK3399Pro学习笔记】二、Thinker Edge R 内网穿透以实现远程SSH
- 谷歌地图添加点击事件 Google Maps API V3: Add click event listener to all (multiple) marker
- C++builder Tokyo 调用com 不正确的变量类型
- python随机森林库_随机森林库:R和Python中的不同结果
- java内部类之成员内部类实例
- 把3000行代码重构成15行的牛逼操作!!!
- C#判断平面中两条直线的夹角
- 怎么把图片内存变小尺寸保持不变呢。
- 乌龙钻白玉 白虎卧沙滩
- ffmpeg加水印、logo等
- 实验四 微程序控制器实验
- Xshell简单介绍与作用
- RAID 容量计算器
- 如何理解数据科学的中的数据泄露(Data Leakage)
- 生产者和消费者。举一个寄信的例子
- OPENWRT/LEDE编译教程
- python 做软件授权代理_软件提卡+授权API+代理系统三合一网站源码(开源)
热门文章
- 以太坊DApp开发环境搭建
- datePicker在fullscreen下不弹出
- 同质化软件“吃掉”创新 企业因何深陷罗网?
- Oracle PL/SQL Developer集成TFS进行团队脚本文件版本管理
- 13 种在 Linux 系统上检测 CPU 信息的工具
- 《Spark大数据分析实战》——1.4节弹性分布式数据集
- Java 多线程(二)线程间的通信应用--生产者消费者(未完)
- 安全日志的自动备份方法
- php获取post表单数据_PHP如何通过post方法来获取form表单中数据?(代码示例)
- SmartNIC/DPU — Overview