??????? BeetleX.VueHost是一個用于打包Vue和提供HTTP服務的程序，它能提供在沒安裝vue-cli和webpack的情況下開發vuejs應用。

使用
? ? ??? BeetleX.VueHost無須安裝下載運行即可，可以通過以下地址下載：

鏈接：https://pan.baidu.com/s/1z4Jfz2GgsXHUH8cJoTdprg

提取碼：6ro5

下載VueHost-win64-1.0.zip文件解壓運行

以上是工具的運行結果，默認是以80端口提供服務，如果需要更改端口可以運行

BeetleX.VueHost.exe port=8080

服務默認帶了個簡單的頁面所以直接訪問服務

使用VSCode

??????? BeetleX.VueHost啟動后，就可以用VSCode打開所服務在所的目錄并進行Vuejs應用開發。

打開目錄后就可以添加和修改樣vue文件，所有修改無須重啟BeetleX.VueHost，只需要刷新瀏覽器即可查看最新更改后的內容。

基礎CSS和JS文件

????????在開發Web的時候需要包括基礎的CSS和JS文件，這個時候需要在base_files.json進行配置，BeetleX.VueHost會根據配置的順序進行打包處理。

只要需輸入文件名即可，服務會自動匹配。最終引用輸出的JS和CSS路徑如下

<link?href="/css/beetlex-v1.css"?rel="stylesheet"?/> <script?src="/js/beetlex-v1.js"></script>

V1代表版本號，調整版本號會重新生成內容輸出。

VUE文件編寫

??????? BeetleX.VueHost支持的Vue文件和Vue-cli差不多，不過有些不同的地方是沒有import引用，vue文件即代表對應組件名稱。

對應引用標簽

<div id="app"><v-title></v-title><v-hello></v-hello></div>

*.vue文件編寫格式如下:

<div><a href="javascript:void(0)" @click="onHello">Hello</a> </div> <script>export default{methods: {onHello(){alert('vuejs host!')}}} </script> <style>a {color:#ff0000;}a:hover{color:#808080;} </style>

發布

??????? BeetleX.VueHost最終會在當前目錄上生成beetlex.css和beetlex.js兩個文件，Vue對應的css和js都打包到這兩個文件中；可以把文件部署到自己的應用中。

BeetleX

開源跨平臺通訊框架(支持TLS)
提供高性能服務和大數據處理解決方案

https://beetlex.io

總結

以上是生活随笔為你收集整理的VSCode+BeetleX.VueHost开发Vue应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。