tetapan pemasangan vue

Vue ialah salah satu rangka kerja bahagian hadapan moden yang membolehkan pembangun membina antara muka pengguna interaktif yang boleh disusun dengan baik, dipaparkan dan berinteraksi serta sesuai untuk pelbagai jenis aplikasi dan projek. Dalam artikel ini, kami akan memperkenalkan secara ringkas pemasangan dan persediaan Vue.

1. Pasang Vue

1 Gunakan CDN

Vue menyediakan CDN untuk membolehkan pembangun merujuk secara langsung pustaka Vue dalam HTML. Hanya salin kod berikut ke dalam fail HTML anda:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

NOTA: Walaupun kaedah ini mudah, ia tidak disyorkan dalam persekitaran pengeluaran kerana ia boleh menjejaskan prestasi halaman dan kelajuan pemuatan secara negatif.

2. Gunakan NPM

Menggunakan NPM untuk memasang Vue adalah salah satu kaedah yang paling biasa berikut ialah langkah pemasangan:

a anda sudah berada di Node.js dipasang pada komputer.

b. Dalam terminal, masukkan arahan berikut untuk memasang Vue:

npm install vue

c. Selepas pemasangan selesai, anda boleh mula menggunakan Vue. Anda boleh merujuk pustaka Vue dalam fail HTML seperti berikut:

<script src="./node_modules/vue/dist/vue.js"></script>

3 Gunakan Vue CLI

Vue CLI ialah alat baris arahan yang disediakan secara rasmi oleh Vue, yang boleh membantu anda mencipta Vue dengan cepat. aplikasi dan menyediakan pelbagai ciri dan alatan di luar kotak. Berikut ialah langkah-langkah untuk memasang Vue menggunakan Vue CLI:

a. Buka terminal dan pastikan Node.js dipasang pada komputer anda.

b. Dalam terminal, masukkan arahan berikut untuk memasang Vue CLI:

npm install -g @vue/cli

c. Selepas pemasangan selesai, anda boleh menggunakan Vue CLI untuk mencipta aplikasi Vue baharu, seperti berikut Paparan:

vue create my-app

d Kemudian anda perlu memilih pratetap dan tunggu Vue CLI memuat turun dan memasang semua kebergantungan yang diperlukan.

e. Selepas pemasangan selesai, anda boleh beralih ke folder aplikasi yang baru dibuat dan jalankan arahan berikut untuk memulakan aplikasi:

npm run serve

2 >1 .Perkenalkan Vue

Jika anda memilih untuk menggunakan kaedah CDN untuk merujuk Vue, cuma tambah kod berikut dalam fail HTML anda:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Jika anda memasang Vue menggunakan NPM, Kemudian dalam Fail JavaScript, anda perlu menambah kod berikut pada permulaan fail:

import Vue from 'vue'

2. Cipta contoh Vue

Setelah anda berjaya memperkenalkan Vue, anda boleh mencipta tika Vue. Anda perlu menghantar objek pilihan kepada pembina Vue, yang mengandungi pelbagai pilihan dan maklumat konfigurasi untuk contoh Vue.

Berikut ialah contoh contoh asas Vue:

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

Dalam contoh di atas, kami mengikat tika Vue pada elemen HTML dengan nilai id "aplikasi" dan mentakrifkan atribut Data bernama "message ".

3. Paparkan data

Vue menghubungkan model dan pandangan melalui pengikatan data. Anda boleh menggunakan sintaks templat Vue untuk memaparkan data dalam templat HTML. Gunakan pendakap kerinting berkembar "{{}}" untuk menginterpolasi sifat data terikat.

Sebagai contoh, dalam contoh Vue di atas, kita boleh memaparkan nilai atribut "mesej" dalam templat HTML:

<div id="app">
  {{ message }}
</div>

Apabila tika Vue dipaparkan, Vue akan berdasarkan nilai yang dinyatakan dalam templat Atribut data mengemas kini DOM secara automatik. Dalam contoh di atas, nilai atribut "mesej" ialah "Hello, Vue!", jadi hasil pemaparan ialah:

<div id="app">
  Hello, Vue!
</div>

Ringkasan

Artikel ini memperkenalkan secara ringkas pemasangan Vue dan tetapan. Anda boleh menggunakan CDN, NPM atau Vue CLI untuk memasang Vue dan mencipta tika Vue untuk memaparkan data dan mengemas kini DOM. Vue ialah rangka kerja hadapan yang sangat baik dengan dokumentasi dan komuniti yang baik, sesuai untuk projek dari semua saiz dan jenis. Semoga artikel ini membantu anda bermula dengan Vue dan mula membina aplikasi bahagian hadapan yang hebat.

Atas ialah kandungan terperinci tetapan pemasangan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!