vue檔案怎麼在瀏覽器中執行
vue檔案在瀏覽器運行的方法：1、開啟cmd指令窗口，使用cd指令進入包含vue檔案的vue專案目錄中；2、在專案目錄中，執行指令「npm run dev」啟動項目；3、在瀏覽器網址列輸入「localhost:8080」即可。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
vue檔案在瀏覽器中執行
#新vue檔案
##官方範例如下，你需要建立index.html 文件：
<html><body>
<p id="app"></p>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
<script>
const options = {
moduleCache: {
vue: Vue },
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(url+' '+res.statusText), { res });
return await res.text();
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
template: '<my-component></my-component>'
});
app.mount('#app');
</script></body></html><template> <p class="title"> hello world </p> </template> <script> export default { setup () { console.log('hello world') } } </script> <style scoped> .title { font-size: 40px; color: red; } </style>登入後複製#啟動專案
在cmd中，使用cd指令進入vue專案
npm run dev在專案目錄中，執行指令- ，會用熱加載的方式運行我們的應用，熱加載可以讓我們在修改完程式碼後不用手動刷新瀏覽器就能即時看到修改後的效果。
-
在瀏覽器輸入localhost:8080即可。
以上是vue檔案怎麼在瀏覽器中執行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
-
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Linux系統中執行.sh檔？
Mar 14, 2024 pm 06:42 PM
如何在Linux系統中執行.sh檔？在Linux系統中，.sh文件是一種被稱為Shell腳本的文件，用於執行一系列的命令。執行.sh檔案是非常常見的操作，本文將介紹如何在Linux系統中執行.sh文件，並提供具體的程式碼範例。方法一：使用絕對路徑執行.sh文件要在Linux系統中執行一個.sh文件，可以使用絕對路徑來指定該文件的位置。以下是具體的步驟：打開終
如何從Python中運行Javascript？
Sep 07, 2023 pm 11:33 PM
在Python中，我們可以使用PyExecJS函式庫或Python的js2py函式庫來執行Javascript程式碼。 PyExecJs函式庫提供了一個一致的API，可以使用各種JavaScript引擎（包括Node.js、JavaScriptCore和Google的V8引擎）從Python中執行JavaScript程式碼。 js2py函式庫允許您透過解析JavaScript程式碼並在Python中解釋它來在Python中執行JavaScript程式碼。本文將教我們如何使用PyExecJS函式庫從Python運行javasc
PyCharm使用教學：詳細指引你執行操作
Feb 26, 2024 pm 05:51 PM
PyCharm是一款非常受歡迎的Python整合開發環境（IDE），它提供了豐富的功能和工具，使得Python開發變得更有效率和便利。本文將為大家介紹PyCharm的基本操作方法，並提供具體的程式碼範例，幫助讀者快速入門並熟練操作工具。 1.下載安裝PyCharm首先，我們需要前往PyCharm官網（https://www.jetbrains.com/pyc
無法在Windows 7上執行exe檔的原因
Feb 18, 2024 pm 08:32 PM
為什麼win7不能執行exe檔在使用Windows7作業系統時，許多使用者可能會遇到一個常見的問題，即無法執行exe檔。 exe檔是Windows作業系統中常見的可執行文件，它們通常用於安裝和執行各種應用程式。然而，有些使用者可能會發現，當他們嘗試執行exe檔時，系統並不會回應或給予錯誤訊息。造成這個問題的原因有很多。以下將列舉一些常見的原因以及對應的解
為何無法在Windows 7上執行bat文件
Feb 19, 2024 pm 03:19 PM
為什麼win7不能運行bat檔最近，許多使用Windows7作業系統的使用者反映他們無法執行.bat檔。這引發了廣泛的討論和疑惑。為什麼一個良好運作的作業系統不能運行一個簡單的.bat檔呢？首先，我們要先了解.bat檔的背景。 .bat文件，也稱為批次文件，是一種純文字文件，包含了一系列的命令，這些命令可以被Windows命令解釋器（cmd.ex
matlab怎麼運行m檔-matlab運行m檔教程
Mar 04, 2024 pm 02:13 PM
大家知道matlab怎麼運行m檔嗎?下文小編就帶來了matlab運行m文件的方法教程，希望對大家能夠有所幫助，一起跟著小編來學習一下吧!1、首先打開matlab軟體，選擇左上角的“打開”，如下圖所示。 2、然後選擇要運行的m文件，並且打開，如下圖所示。 3.在視窗按F5來運行程序，如下圖所示。 4.我們可以在命令列視窗和工作區看運行結果，如下圖。 5.直接點選「運行」也可以運行文件，如下圖所示。 6.最後可以在命令列視窗和工作區看m檔案的運行結果，如下圖所示。上面就是小編為大家帶來的matlab怎麼
哪個win10版本運行速度最快
Jan 05, 2024 pm 05:29 PM
對於微軟公司的新系統windows10，小夥伴就想要知道win10系統哪個版本的作業系統運行的是最快最流暢的，版本的更新其實是對於系統內容功能的更新、缺陷的修復。 win10哪個版本運行最快1、win10每個版本的的差別主要在各自功能上2、除了不同功能之外其它方面都是相同的3、在運行速度上win10各個版本都沒有很大差別，主要還是看自身電腦的設定~win10家用版：1、win10家用版相當於win8.1的核心版，入門級的一個系統版本。 2.win10家庭版特定國家版相當於win8.1的OEM中文版，
快速掌握PyCharm的運行快捷鍵
Feb 26, 2024 pm 09:24 PM
PyCharm是一款功能強大的Python整合開發環境，透過靈活的快速鍵可提高開發效率。本文將向您介紹PyCharm中常用的運行快捷鍵，並提供具體的程式碼範例，幫助您快速入門PyCharm的使用。首先，我們需要了解PyCharm中最基本的運作快速鍵：執行程式。在PyCharm中，您可以使用快速鍵"Shift+F10"來執行目前的Python程式。下面是一
