webpack+vue.js实现组件化详解
简介在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了。 建立vue组件在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: 首先在index.hmtl中写入代码:
Vue example
在main.js中写入: 这样运行命令webpack就可以看到效果了 这里用到了ES6的模块儿—
命令export命令用于规定模块的对外接口。一个模块就是一个独立文件。该文件内的所有变量外部都无法获取。如果希望外部能够读取模块内部的某个变量,就必须使用export关键字对外暴露出该变量。例如: 这样就可以对外输出三个变量。
命令使用 webpack的hot-reload 前端自动刷新现在已经很常见了,即改变页面后,浏览器自动刷新,但是这个功能在我们做单页面应用时候会很不好用,所以,webpack支持hot-reload(热替换),当我们修改模块时候不会页面不会刷新,会直接在页面中生效。 hot-reload的基础—webpack-dev-server webpack-dev-server支持两种模式的自动刷新页面: iframe模式(页面嵌入一个iframe并在其中呈现页面的变化) inline模式(一个小型的webpack-dev-server客户端会作为入口文件打包,这个客户端会在后端代码改变的时候刷新页面) iframe模式使用iframe模式无需额外的配置,在dos下输入命令 在浏览器中输入 inline模式在dos下输入命令 启动服务器,在浏览器中打开 关于webpack-dev-server的详细说明,可以参考官方文档或者博客WEBPACK DEV SERVER。 这里有一个问题需要说明下在很多文章中都说,修改app.vue文件中script标签中的msg文字,会在浏览器中立即呈现效果,但是事实上我在做demo的时候并没有出现这个效果,Google了很多,找到了答案,尤大说:“data是初始值,但热更新的时候会保留当前状态”。 至此,关于webpack+vue的基本结束,虽然简单,但是由于在这个过程中也遇到一些坑,所以总结下,关于对vue的研究,这才只是个开始… 附:我的webpack配置文件: package.json文件: 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |