溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹vue文件如何在瀏覽器運行，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
vue文件在瀏覽器運行的方法：1、打開cmd命令窗口，使用cd命令進入包含vue文件的vue項目目錄中；2、在項目目錄中，運行命令“npm run dev”啟動項目；3、在瀏覽器地址欄輸入“l(fā)ocalhost:8080”即可。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
vue文件在瀏覽器運行
新建vue文件
官方示例如下，你需要創(chuàng)建 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>
然后你需要創(chuàng)建 myComponent.vue 文件，文件內(nèi)容如下：
<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文件如何在瀏覽器運行”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
