??????? BeetleX.VueHost是一個(gè)用于打包Vue和提供HTTP服務(wù)的程序，它能提供在沒安裝vue-cli和webpack的情況下開發(fā)vuejs應(yīng)用。

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

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

提取碼：6ro5

下載VueHost-win64-1.0.zip文件解壓運(yùn)行

以上是工具的運(yùn)行結(jié)果，默認(rèn)是以80端口提供服務(wù)，如果需要更改端口可以運(yùn)行

BeetleX.VueHost.exe port=8080

服務(wù)默認(rèn)帶了個(gè)簡單的頁面所以直接訪問服務(wù)

使用VSCode

??????? BeetleX.VueHost啟動(dòng)后，就可以用VSCode打開所服務(wù)在所的目錄并進(jìn)行Vuejs應(yīng)用開發(fā)。

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

基礎(chǔ)CSS和JS文件

????????在開發(fā)Web的時(shí)候需要包括基礎(chǔ)的CSS和JS文件，這個(gè)時(shí)候需要在base_files.json進(jìn)行配置，BeetleX.VueHost會(huì)根據(jù)配置的順序進(jìn)行打包處理。

只要需輸入文件名即可，服務(wù)會(huì)自動(dòng)匹配。最終引用輸出的JS和CSS路徑如下

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

V1代表版本號(hào)，調(diào)整版本號(hào)會(huì)重新生成內(nèi)容輸出。

VUE文件編寫

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

對(duì)應(yīng)引用標(biāo)簽

<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>

發(fā)布

??????? BeetleX.VueHost最終會(huì)在當(dāng)前目錄上生成beetlex.css和beetlex.js兩個(gè)文件，Vue對(duì)應(yīng)的css和js都打包到這兩個(gè)文件中；可以把文件部署到自己的應(yīng)用中。

BeetleX

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

https://beetlex.io

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。