Apakah yang terkandung dalam baldi keluarga vue.js?

Timba keluarga Vue.js termasuk scaffolding vue-cli, penghalaan vue-router, mod pengurusan keadaan vuex, axios dan rangka kerja UI. Vue ialah rangka kerja JavaScript untuk membina antara muka pengguna Ia dibina berdasarkan HTML, CSS dan JavaScript standard, dan menyediakan satu set model pengaturcaraan deklaratif dan berasaskan komponen untuk membantu pembangun membangunkan antara muka pengguna dengan cekap.

Sistem pengendalian untuk tutorial ini: sistem Windows 10, vue versi 3.0, komputer Dell G3.

Timba keluarga Vue.js terdiri daripada scaffolding vue-cli, penghalaan vue-router, mod pengurusan keadaan vuex, axios dan rangka kerja UI. Vue (sebutan /vjuː/, serupa dengan paparan) ialah rangka kerja JavaScript untuk membina antara muka pengguna. Ia dibina berdasarkan HTML standard, CSS dan JavaScript, dan menyediakan model pengaturcaraan deklaratif dan berasaskan komponen untuk membantu pembangun membangunkan antara muka pengguna dengan cekap.

1. Alat pembinaan projek: vue-cli

vue-cli juga dipanggil perancah dan secara rasminya ditakrifkan sebagai alat standard untuk pembangunan Vue.js. Vue-cli ialah sistem lengkap untuk pembangunan pesat berdasarkan Vue.js, yang boleh menjana templat projek Vue.js+webpack secara automatik. Vue cli menyediakan ciri berkuasa untuk menyesuaikan projek baharu, mengkonfigurasi prototaip, menambah pemalam dan memeriksa konfigurasi pek web. Versi @vue/cli 3.x boleh mencipta perancah projek baharu dengan pantas melalui arahan vue create. Ia tidak perlu bergantung pada webpack untuk membina projek seperti vue 2.x.

Berbanding dengan pengenalan tag scirpt, perancah vue-cli mempunyai ciri-ciri berikut:

1) Fungsi kaya

Menyokong Babel, TypeScript, ESLint, PostCSS, PWA, ujian unit dan Ujian hujung ke hujung disokong di luar kotak.

2) Mudah dilanjutkan

Sistem pemalamnya membolehkan komuniti membina dan berkongsi penyelesaian boleh guna semula berdasarkan keperluan biasa.

3) Tiada Eject diperlukan

Vue CLI boleh dikonfigurasikan sepenuhnya, tiada eject diperlukan. Dengan cara ini projek anda boleh dikemas kini untuk masa yang lama.

4) Antara muka grafik pada CLI

Buat, bangun dan urus projek anda melalui antara muka grafik yang menyokong.

5) Buat prototaip serta-merta

Gunakan satu fail Vue untuk melaksanakan inspirasi baharu dengan serta-merta.

6) Kalis masa hadapan

Menjana kod ES2015 asli dengan mudah untuk penyemak imbas moden, atau bina komponen Vue anda sebagai Komponen Web asli.

Pasang

npm install -g @vue/cli
# OR
yarn global add @vue/cli

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue ui

2 Pengurus laluan: vue-router

vue-router ialah pengurus penghalaan rasmi yang dilancarkan oleh Vue It digunakan terutamanya untuk mengurus URL, merealisasikan surat-menyurat antara URL dan komponen, dan bertukar antara komponen melalui URL, menjadikannya lebih mudah untuk membina aplikasi satu halaman. Ia terutamanya mempunyai ciri-ciri berikut:

1) Jadual penghalaan/pandangan bersarang

2) Konfigurasi penghalaan berasaskan komponen modular

3) Parameter penghalaan, pertanyaan, Wildcard

4) Lihat kesan peralihan berdasarkan sistem peralihan Vue.js

5) Kawalan navigasi berbutir halus

6) Pautan dengan kelas CSS yang diaktifkan secara automatik

7) Mod sejarah HTML5 atau mod cincang, diturunkan secara automatik dalam IE9

8) Kelakuan bar skrol tersuai

Kod pemasangan Penghala vue

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3 : vuex

Dalam sesetengah projek besar, kadangkala kita menemui satu halaman yang mengandungi sejumlah besar komponen dan struktur data yang kompleks, dan mungkin Komponen juga mempengaruhi keadaan satu sama lain, dalam hal ini aliran peristiwa dalam pokok komponen boleh menjadi sangat kompleks, menjadikan penyahpepijatan amat sukar. Untuk menyelesaikan masalah ini, model pengurusan negeri Vuex telah diperkenalkan ialah perpustakaan pelaksanaan model pengurusan negeri Ia digunakan terutamanya bersama Vue.js dalam bentuk pemalam, yang membolehkan kami mengurus tugas yang kompleks dalam aliran acara Komponen.

kaedah pemasangan vuex

npm install vuex --save

4. axios

Axios ialah perpustakaan HTTP berasaskan janji , permintaan pos.

Ciri Axios

1) Cipta XMLHttpRequests daripada penyemak imbas

2) Cipta permintaan http daripada node.js

3) Support Promise API

4) Permintaan dan respons memintas

5) Menukar data permintaan dan data respons

6) Keupayaan untuk membatalkan permintaan

7) Menukar data JSON secara automatik

8) Pelanggan menyokong pertahanan terhadap XSRF

Kaedah pemasangan

npm install axios

atau terus memperkenalkan

5 rangka kerja UI: iview, vant, elementUI
iview ialah satu set perpustakaan komponen UI berkualiti tinggi berdasarkan Vue (dibahagikan kepada program Mini dan versi PC); 
vant ialah perpustakaan komponen mudah alih Vue yang ringan dan boleh dipercayai. Ia adalah satu set perpustakaan komponen mudah alih berdasarkan Vue 2.0 sumber terbuka oleh Youzan, bertujuan untuk menjadi lebih pantas dan. lebih ringkas. Bangunkan tapak mudah alih yang cantik dan mudah digunakan berdasarkan Vue. 
Ant Design Vue ialah pelaksanaan Vue bagi Ant Design yang membangunkan dan menyediakan produk bahagian belakang peringkat perusahaan. 
elementUI adalah berdasarkan pustaka komponen tengah dan belakang desktop Vue 2.0. 
Atas ialah kandungan terperinci Apakah yang terkandung dalam baldi keluarga vue.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!