您的位置:

Vue.js 中的全局事件总线——Vue $bus

Vue.js 提供了一种全局事件总线的机制——Vue $bus。 $bus 实例中可以订阅、发布、取消订阅触发的事件,在不同组件之间传递数据。这种机制简化了组件之间相互影响的复杂性,使得不同组件之间的通讯变得更加便捷。

一、Vue部署

Vue.js 是一个建立在 Vue.js 上的 UI 库。Vue.js 支持webpack 配置和vue-cli脚手架构建项目,如下面示例所示:

  npm install -g vue-cli
  vue init webpack myproject
  cd myproject
  npm install
  npm run dev 

在命令行界面中操作完成后,执行 npm run dev 启动 webpack 服务器。访问本地的 http://localhost:8080 即可看到页面。

二、Vue部署非跨域

当 Vue 部署到非跨域环境时,可以使用以下代码在 Vue 实例中添加一个 $bus 属性。

  const bus = new Vue()
    
  Object.defineProperty(Vue.prototype, '$bus', {
      get() {
          return bus
      }
  })

然后在不同的组件中,可以使用以下代码订阅事件:

  this.$bus.$on('eventName', (data)=>{
      // 处理数据
  })

还可以使用以下代码取消订阅事件:

  this.$bus.$off('eventName')

最后,在需要订阅事件的组件中,使用以下代码触发事件即可:

  this.$bus.$emit('eventName', data)

三、Vue部署在ipfs

使用 Vue 部署在 IPFS 中,需要在 Vue 项目的 dist 目录下,打包出一个网页发布到IPFS,如下面的示例所示:

  npm run build

然后会生成一个 dist 目录,此时将 dist 目录添加到 IPFS 中即可:

  ipfs add -w ./dist

添加完成后,会生成一个 hash ,访问以下链接便可查看 Vue 应用程序:

  https://ipfs.io/ipfs/your-hash/index.html

四、Vue部署Linux

将 Vue 部署到 Linux 系统中,需要在服务器中安装 Node.js、npm 和 pm2。安装完成后,在服务器中执行以下命令即可:

  npm run build
  pm2 start npm --name "app-name" -- start

此时 Vue 就部署在服务器中了,可以通过服务器的 IP 访问部署好的 Vue 应用程序。

五、Vue部署到服务器

在 Vue 项目中执行以下命令,将应用程序打包成一个可执行的文件:

  npm run build
  npx http-server dist/

执行完毕后,Vue 应用程序会部署在服务器上。

六、Vue部署nginx

将 Vue 部署到 Nginx 中,需要在 Nginx 配置文件中添加以下代码:

  location / {
    root /path/to/vuedir/dist; 
    index index.html; 
    try_files $uri $uri/ /index.html;
  }

执行完毕后,Vue 应用程序会部署在 Nginx 中。

总之,Vue.js 中的全局事件总线——Vue $bus 十分方便,可以为组件之间的通讯提供稳定、标准化的途径。此外,它还可以与不同的部署环境相适应,应用在不同场景和系统中,为 Vue 开发带来了很大的方便。