Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menjalankan fail vue dalam penyemak imbas
Bagaimana untuk menjalankan fail vue dalam penyemak imbas
- 青灯夜游asal
- 2021-09-29 16:57:4318393semak imbas
Cara menjalankan fail vue dalam pelayar: 1. Buka tetingkap arahan cmd dan gunakan arahan cd untuk memasuki direktori projek vue yang mengandungi fail vue 2. Dalam direktori projek, jalankan arahan "; npm run dev" untuk memulakan Projek; 3. Masukkan "localhost:8080" dalam bar alamat penyemak imbas.
Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.
Fail vue dijalankan dalam penyemak imbas
-
Fail vue baharu
Contoh rasmi adalah seperti berikut, anda perlu mencipta fail 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>Kemudian anda perlu mencipta fail myComponent.vue dengan kandungan berikut:
<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> Mulakan projek
Dalam cmd, gunakan arahan cd untuk memasuki vue projek
Dalam direktori projek, Menjalankan arahan npm run dev akan menjalankan aplikasi kami menggunakan pemuatan panas membolehkan kami melihat kesan yang diubah suai dalam masa nyata tanpa menyegarkan penyemak imbas secara manual selepas mengubah suai kod.
Masukkan localhost:8080 dalam penyemak imbas.
Cadangan berkaitan: "tutorial vue.js"
Atas ialah kandungan terperinci Bagaimana untuk menjalankan fail vue dalam penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!