ホームページ >ウェブフロントエンド >フロントエンドQ&A >ブラウザでvueファイルを実行する方法
ブラウザでvueファイルを実行する方法
- 青灯夜游オリジナル
- 2021-09-29 16:57:4318401ブラウズ
ブラウザで 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>次に、myComponent.vue ファイルを作成する必要があります。ファイルの内容は次のとおりです。 #
<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 プロジェクトに入ります
プロジェクト ディレクトリで、コマンド
を実行すると、ホット ロードを使用してアプリケーションが実行されます。ホット ロードを使用すると、変更後にブラウザを手動で更新しなくても、変更された効果をリアルタイムで確認できます。コード。
-
関連する推奨事項: 「
vue.js チュートリアル 」
以上がブラウザでvueファイルを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。