dtcms文档 分布式机器 Quartz 网络服务器 Spring Cloud mysqli charts ios7 linktosql camera vue路由 bootstrap图表 最新更新国内最快的dns 手机banner常用尺寸 edate函数的使用方法 coreldraw入门学习 python如何注释 python的lambda函数 java获取年份 java多线程教程 java时间转时间戳 java对象是什么 嵌入式开发教程 猫爪 ipad锁屏 剑三醉猿 idataparameter 0x00000057 司司网吧 草图大师版本转换器 omg小北 编写软件 qq空间自动点赞 反转字符串 ps旋转图层 vivado下载 csshover javascript基础教程 在线正则表达式测试 华为手机内部存储清理
当前位置: 首页 > 学习教程  > 编程语言

webpack中的热模块替换

2020/11/24 9:26:44 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

说明:模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。本页面重点介绍实现,而概念页面提供了更多关于它的工作原理以及为什么它有用的细节 1) 启用 i 配置 …

说明:模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。本页面重点介绍实现,而概念页面提供了更多关于它的工作原理以及为什么它有用的细节

1) 启用
i 配置

devServer: {
// 指定服务器根目录
contentBase: './dist',
// 自动打开浏览器
open: true,
// 启用热模块替换
hot: true
},

ii 插件
在这里插入图片描述
2) 测试
编写业务代码App.vue
示例:

<template>
  <div>
    <h1>TODO-LIST</h1>
    <div class="list">
      <input type="text" v-model="content"/>
      <button @click="addlist">提交</button>
      <ul>
        <li v-for="(item,index) of todolists" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
//import img from './assets/images/bg.jpg'
/*import './assets/images/unChecked.svg'
import './assets/styles/test.css'*/
import "./assets/styles/global.styl";
export default {
  name: "App", //组件的名称
  data(){
      return {

      todolists:["todo1","todo2","todo3"],
      content:""
       }
  },
  methods:{
      addlist(){
          if(this.content==="") return 
          this.todolists.push(this.content);
          this.content=""
      }
  }
};
</script>

<style scoped>
h1 {
  color: red;
}
.list ul li:nth-child(2n) {
  color: green;
}
</style>
  • 修改样式颜色, 发现之前添加的内容依然存在

本文链接: http://www.dtmao.cc/news_show_400040.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?