位置: 编程技术 - 正文

用Webpack构建Vue项目的实践(webpack 构建流程)

编辑:rootadmin

推荐整理分享用Webpack构建Vue项目的实践(webpack 构建流程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:webpack vue3,使用webpack搭建vue,webpack 构建流程,webpack+vue,webpack搭建,webpack 构建流程,webpack+vue,使用webpack搭建vue,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

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

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

在命令行中安装webpack:

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

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

最后运行webpack进行打包:

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

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

用Webpack构建Vue项目的实践(webpack 构建流程)

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

webpack

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

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

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

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

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

运行命令行 npm run dev:

这里看到有一大段内容,我们要运行 run dev,在浏览器中显示:

当将页面修改成:

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

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

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

标签: webpack 构建流程

本文链接地址:https://www.jiuchutong.com/biancheng/369743.html 转载请保留说明!

上一篇:浅谈react 同构之样式直出(react 同级组件之间传值)

下一篇:原生JS实现 MUI导航栏透明渐变效果(原生js实现promise.all)

  • 所得税为什么比利润高
  • 企业所得税年报补报
  • 企业利润对外投资 所得税
  • 检查记账凭证的主要方法有哪些?
  • 美元利息结汇时结汇项目是什么
  • 建筑企业异地申报个税
  • 申报后发现成本算错了
  • 长期股权投资权益法下初始投资成本
  • 应交税金应交增值税已交税金怎么结转
  • 进项已经抵扣会退回吗
  • 电子发票报销后还能冲红么
  • 哪些房屋交易需要公证
  • 期初未交增值税借方余额
  • 如何确定增值税
  • 健身房会计一般做什么
  • 固定资产捐赠的增值税
  • 土地开发中三通一平
  • 税务局开的专票可以抵扣吗
  • 购进商品没收到货怎么办
  • win10专业版激活密钥永久
  • 公益性捐赠所得税税前扣除标准
  • 公司增资扩股需要考略公司资产吗
  • 哪些固定资产不会随着时间的流逝贬值
  • 国家信用信息公司系公示
  • 苹果系统权限管理在哪找
  • 直接人工分配按计时工资怎么分
  • mac safari使用技巧
  • 怎么修改boot启动项
  • 单位代缴住房公积金分录
  • 公司已开票给客户,但客户未打款怎么办?
  • php mysql数据库
  • php注释的主要作用是什么?
  • php_fileinfo作用
  • 工程款清欠管理办法
  • 总公司给分公司调货
  • 头歌java第一课
  • 支付劳务公司的劳务费计入应付账款还是其他应付款
  • 在vue中如果computed属性是一个异步操作怎么办?
  • laravel调试
  • vue动态绑定class的方法
  • 开源项目网站
  • 银行代发工资当天改工资卡来得及吗
  • 合并报表少数股东权益抵消分录
  • 汽车租赁业务是否属于租赁服务
  • 增值税进项税如何申报
  • 会议费可以开餐费吗
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 负债类账户期末余额在借方还是贷方
  • 处置子公司如何纳税
  • 给子公司注资怎么做账
  • 同一控制下合并冲减资本公积
  • 编制记账凭证的步骤
  • 同在一个单位
  • 内部往来划账通知单
  • 哪些原始凭证要盖章
  • 现金比率的计算例题
  • 暂估入库估多了,汇算清缴前调整
  • 外购材料用于建筑工程会计分录
  • 进口关税如何交
  • 房地产开发企业资质管理规定
  • 企业净资产怎么填
  • CMD命令操作MSSQL2005数据库(命令整理)
  • 重装win7系统后鼠标反应慢
  • win8的应用商店
  • windows iis配置
  • ubuntu禁用服务命令
  • ubuntu文本编辑器怎么打开
  • linux 安装jmap
  • linux whoami命令详解
  • 垂直翻转画布
  • shell脚本批处理
  • sell脚本
  • 菜鸟教程安卓
  • jQuery实现HTML表格单元格的合并功能
  • jQuery 更改checkbox的状态,无效的解决方法
  • scroll-view组件用于实现
  • 从局部变量和全变量区分
  • 重庆车辆检测费多少钱
  • 江苏灵活就业医保交多少年
  • 国税发票如何查真伪查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设