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 開發帶來了很大的方便。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/243123.html