用Webpack构建Vue项目的实践


Posted in Javascript onNovember 07, 2017

最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过本篇文章分享给更多人

开始之前,需要安装node环境。(安装过程在此就不??铝耍?/p>

1、创建基本结构首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录。创建一个没有任何依赖关系的package.json,可以通过命令行 npm init 创建。

用Webpack构建Vue项目的实践

配置下基本信息即可。创建一个index.html文件,这个是显示在浏览器中的页面。

用Webpack构建Vue项目的实践

注意:1、这里的暂时并不存在;2、的数据会被vue文件填入。创建一个src文件夹,并在文件夹内新建一个main.js文件:

用Webpack构建Vue项目的实践

这样我们就完成了一个关于vuejs骨架,但是如何让他运行在浏览器中呢,这个时候我们就需要利用webpack打包成js文件了。

2、基本webpack构建创建一个webpack.config.js的文件:

用Webpack构建Vue项目的实践

在命令行中安装webpack:

用Webpack构建Vue项目的实践

安装本地库(作为dev dependencies),需要在package.js中添加devDependencies的部分:

用Webpack构建Vue项目的实践

保存后运行:npm install然后,vuejs库安装到你的dependencies中:

用Webpack构建Vue项目的实践

最后运行webpack进行打包:

用Webpack构建Vue项目的实践

3、vue-loader和.vue文件什么是vue-loader?vue-loader是webpack下loader插件,可以将.vue文件输出成组件。创建一个文件夹叫component,并在文件夹内新建一个app.vue文件,app.vue内容如下:

用Webpack构建Vue项目的实践

然后修改main.js的代码,如下:

用Webpack构建Vue项目的实践

重新运行一下,我们看到有报错了:

用Webpack构建Vue项目的实践webpack

不知道怎么去处理 .vue 的新语法。所以需要修改下webpack配置文件:

用Webpack构建Vue项目的实践

同时,在package.json加入一些库:

用Webpack构建Vue项目的实践

新加库以后,再重新npm install下载依赖包,然后重新打包一下:

用Webpack构建Vue项目的实践

重新刷新下浏览器就可以看到最新页面了。4、热模块替代/热更新热模块替代或热更新是当今最热门新的技术。它让你保存JavaScript文件,就把对应的组件实时更新。首先,我们需要用webpack的dev server。修改你的devDependencies在package.json.

用Webpack构建Vue项目的实践

然后再命令窗口中执行cnpm install。下载好依赖包后,再下载webpack-dev-server,执行命令行cnpm install -g webpack-dev-server,然后把脚本加入到package.json中

用Webpack构建Vue项目的实践

运行命令行 npm run dev:

用Webpack构建Vue项目的实践

这里看到有一大段内容,我们要运行http://localhost:8080/才能看到效果。在这里值得一提的是:之前我们在webpack.config.js里面是没有设置publicPath的,但是如果使用webpack-dev-server,你会发现,这个不会有更新。我们来试验一下:在package.json文件中,将publicPath注释掉:

用Webpack构建Vue项目的实践

app.vue代码如下:

用Webpack构建Vue项目的实践

输入命令npm run dev,在浏览器中显示:

用Webpack构建Vue项目的实践

当将页面修改成:

用Webpack构建Vue项目的实践

刷新浏览器,显示未变。此时,若将publicPath注释取消,重新再输入命令行,刷新浏览器,此时显示更新:

用Webpack构建Vue项目的实践

且不需要重新输命令行,修改代码后,都会更新。这个时候你会发现:如果我们修改的时template里面的html,这个时候,浏览器会秒变,并不需要刷新浏览器,比如:

用Webpack构建Vue项目的实践

用Webpack构建Vue项目的实践

但是如果你是将data数据更新,就必须要刷新下浏览器才行。(在这个地方我花了差不多快半个小时的时候才知道这个情况,我以为是我的代码写得有问题,才发现,原来更新template不需要刷新,而更新里面的data是需要刷新的。至于为什么,我也不知道。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
使用Vue实现图片上传的三种方式
Jul 17 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
vue双花括号的使用方法 附练习题
Nov 07 #Javascript
vue组件生命周期详解
Nov 07 #Javascript
Angular2的管道Pipe的使用方法
Nov 07 #Javascript
浅谈react 同构之样式直出
Nov 07 #Javascript
vue组件watch属性实例讲解
Nov 07 #Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 #Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 #Javascript
You might like
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
Array对象方法参考
2006/10/03 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
2013/06/25 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Python的装饰器使用详解
2017/06/26 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python如何转换字符串大小写
2020/06/04 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
pytorch SENet实现案例
2020/06/24 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
中文专业毕业生自荐信
2014/05/24 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
详解java如何集成swagger组件
2021/06/21 Java/Android