vue 组件 实时刷新

Vue 组件的实时刷新有多种方式，以下是其中的两种：

1. 使用 Vue.js 的开发环境

Vue.js 的开发环境提供了实时刷新的功能，每当你修改组件的代码时，它会自动重新加载页面以显示最新的更改。你可以通过在命令行中运行 `npm run serve` 来启动开发服务器，然后在浏览器中打开 `http://localhost:8080` 即可开始开发和实时刷新。

2. 使用 Vue Loader 插件

Vue Loader 是一个 webpack 插件，可以将 Vue 组件编译为 JavaScript 模块，并将模板、样式和代码合并在一起。使用 Vue Loader 可以实现组件级别的热重载，即在修改组件代码时，只有该组件会被重新加载，而不是整个页面。你可以在 webpack 配置文件中添加 Vue Loader，并在开发服务器中启用热重载功能，如下所示：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

// webpack.dev.config.js
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.config')

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    host: 'localhost',
    port: 8080,
    open: true,
    historyApiFallback: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
})

这样，在运行开发服务器时，就可以通过 Vue Loader 插件实现组件的实时刷新了。