简介
poi-preset-vue-jsx-hot-loader 是一个 webpack 配置工具，专为 Vue.js 进行优化设计。它的主要功能是提供热重载服务，可以使得修改过的组件在浏览器中立即被预览，而不需要重新加载整个页面。
安装
在命令行输入以下命令进行安装：
npm install poi-preset-vue-jsx-hot-loader --save-dev
配置
- 在项目目录下创建一个名为
poi.config.js的文件。 - 在文件中写入以下配置代码：
module.exports = {
presets: [
require('poi-preset-vue-jsx-hot-loader')()
]
}使用
在项目中使用 poi-preset-vue-jsx-hot-loader 有以下两种方式：
方式一：在命令行中使用
在命令行中输入以下命令启动项目：
poi --hot
方式二：在 package.json 中使用
在项目的 package.json 文件中添加以下配置：
{
"scripts": {
"start": "poi --hot"
}
}然后在命令行中输入以下命令启动项目：
npm start
示例
App.vue
-- -------------------- ---- -------
----------
-----
------ ------- -------
------- -------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ -------
-
--
-------- -
----- -
------------ -- ---
-
-
-
---------main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')总结
通过本文的学习，你已经学会了如何配置和使用 poi-preset-vue-jsx-hot-loader，以及如何进行热重载功能开发。在实际项目中，合理地使用这个工具可以大大提高开发效率，带来更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da1ef