当我们在开发 Vue.js 应用时，经常需要对组件进行调试和热重载。而 vue-hot-reload-api 这个 npm 包可以让我们在浏览器中实现这个目标。
安装
使用 npm 命令安装：
npm install --save-dev vue-hot-reload-api
引入
在需要使用的组件中，引入 vue-hot-reload-api：
import { createRecord } from 'vue-hot-reload-api'创建记录
在组件的生命周期钩子函数 created() 中创建记录，以便在后面进行热重载操作：
created() {
// 组件名
const id = 'MyComponent'
// 创建记录
createRecord(id, this)
}修改组件
修改组件的代码后，可以通过以下方法实现热重载：
import { reload } from 'vue-hot-reload-api'
// 要重新加载的组件名
const id = 'MyComponent'
// 获取相应的组件实例
const component = require('./MyComponent.vue').default
reload(id, component)示例代码
下面是一个示例组件的完整代码：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
------- ----------------------------- ----------------
------
-----------
--------
------ - ------------- ------ - ---- --------------------
------ ------- -
----- --------------
------ -
------ -
------ ------- ------
-------- ----- -- - ---- -----------
-
--
--------- -
-- ----
--------------------------- -----
--
-------- -
--------------- -
------------ - -------- ---------
--
----------------- -
-- ------
----- --------- - ------------------------------------
-- ---
--------------------- ----------
-
-
-
---------以上就是使用 vue-hot-reload-api 进行热重载的详细教程。在开发过程中，使用这个工具可以提高调试效率，加快开发速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43336