Tutorial mudah untuk membuat projek Vue

Langkah -langkah untuk membuat projek Vue.js: Prasyarat Pemasangan: Node.js (V16.x), Vue CLI (Pemasangan Global). Buat projek: Gunakan arahan VUE CREATE untuk menavigasi ke direktori sasaran. Ketergantungan pemasangan: VUE CLI secara automatik memasang kebergantungan. Jalankan projek: Dalam direktori projek, gunakan perintah NPM Run Serve.

Ajar langkah demi langkah untuk membuat projek vue.js

Persediaan:

• Pasang Node.js (v16.x atau lebih baru)
• Pasang Vue CLI (pemasangan global)

 <code>npm install -g @vue/cli</code>

Buat projek:

1. Buka terminal atau arahan arahan dan navigasi ke lokasi di mana anda ingin membuat projek.
2. Jalankan arahan berikut:

 <code>vue create </code>

Ketergantungan pemasangan:

• Vue CLI mencipta projek dan secara automatik memasang kebergantungan.

Jalankan projek:

• Dalam direktori projek, jalankan arahan berikut:

 <code>npm run serve</code>

• Ini akan memulakan pelayan pembangunan di http: // localhost: 8080 .

Struktur Projek:

• Src/Main.js: Titik Kemasukan Projek, Buat dan Gunung Vue.
• SRC/APP.VUE: Komponen Root VUE, Menentukan susun atur dan kandungan aplikasi.
• SRC/Komponen: Direktori yang mengandungi komponen VUE yang boleh diguna semula.
• Awam: Direktori yang mengandungi fail statik dan favicon.
• Node_modules: Direktori kebergantungan yang dipasang oleh npm.
• Package.json: Fail JSON yang mengandungi tetapan projek, kebergantungan, dan skrip.

Contoh kod:

• src/main.js:

 <code class="js">import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')</code>

• src/app.vue:

 <code class="html"><template> <div> <h1 id="message">{{ message }}</h1> <button>Say Hello</button> </div> </template> <script> export default { data() { return { message: &#39;Hello Vue!&#39; } }, methods: { sayHello() { this.message = &#39;Hello, I am Vue!&#39; } } } </script></code>

NOTIS:

• Vue CLI secara automatik mengkonfigurasi fail lain berdasarkan pratetap dan pilihan yang anda pilih, seperti .env dan vue.config.js .
• Anda boleh melihat pratetap dan pilihan yang ada dengan menjalankan arahan VUE CREATE -HELP .

Atas ialah kandungan terperinci Tutorial mudah untuk membuat projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!