用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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python实现C4.5决策树算法
2018/08/29 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
给国外客户的邀请函
2014/01/30 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
上班旷工检讨书
2015/08/15 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers