Cara memasang sambungan yang disyorkan untuk vue

Vue.js ialah rangka kerja JavaScript popular yang menyediakan cara yang mudah, fleksibel dan cekap untuk membangunkan aplikasi bahagian hadapan. Ekosistem Vue sangat kaya dan mempunyai banyak sambungan berguna termasuk komponen, pemalam, perpustakaan dan banyak lagi. Sambungan ini boleh meningkatkan kecekapan kerja dan kelajuan pembangunan kami. Dalam artikel ini, kami akan membincangkan cara memasang beberapa sambungan yang disyorkan untuk Vue untuk mempercepatkan pembangunan anda.

Vue CLI

Vue CLI ialah alat perancah rasmi untuk membina projek Vue.js dengan cepat. Vue CLI menyediakan banyak ciri berguna, termasuk:

• Buat dan urus projek Vue daripada baris arahan.
• Pelayan pembangunan terbina dalam menyokong pemuatan panas dan penggantian modul panas.
• Menjana struktur projek dan fail konfigurasi secara automatik.
• Menyokong alat binaan dan pemalam yang berbeza, seperti Babel, TypeScript, ESLint, PWA dan banyak lagi.

Memasang Vue CLI adalah sangat mudah:

npm install -g @vue/cli

Selepas pemasangan selesai, anda boleh menggunakan arahan berikut untuk mencipta projek Vue baharu:

vue create my-project

Vue Router

Vue Router ialah penghala yang disokong secara rasmi untuk mengurus navigasi aplikasi bahagian hadapan. Penghala Vue boleh memetakan berbilang komponen ke URL yang berbeza untuk memudahkan penukaran antara URL dan komponen. Penghala Vue juga menyediakan ciri lanjutan seperti penghalaan bersarang, paparan bernama, parameter penghalaan dan banyak lagi.

Memasang Penghala Vue adalah mudah. Hanya jalankan arahan berikut:

npm install vue-router

Selepas pemasangan selesai, anda perlu memperkenalkan Vue Router ke dalam projek Vue:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Kemudian, tentukan penghala dalam komponen Vue anda :

const router = new VueRouter({
  mode: 'history', // 可选值：'hash' 或 'history'
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

Akhir sekali, ikat penghala pada contoh Vue:

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Vuex

Vuex ialah perpustakaan pengurusan negeri yang disokong secara rasmi untuk mengurus aplikasi js aliran data. Vuex menyediakan cara umum yang boleh diperluaskan untuk mengurus keadaan aplikasi. Ia menyimpan keadaan aplikasi dalam satu kedai dan menyediakan beberapa alatan berguna untuk mengendalikan perubahan keadaan, operasi tak segerak, pemalam dan banyak lagi.

Memasang Vuex adalah mudah, cuma jalankan arahan berikut:

npm install vuex

Kemudian, gunakan Vuex dalam komponen Vue anda:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

Sekarang, dalam Akses anda nilai dalam kedai melalui $store dalam komponen:

this.$store.state.count

Mutasi panggilan untuk mengemas kini status:

this.$store.commit('increment')

Vue Devtools

Vue Devtools ialah Sambungan penyemak imbas untuk menyahpepijat aplikasi Vue.js. Vue Devtools menyediakan banyak ciri berguna, termasuk:

• Hierarki komponen, menunjukkan semua komponen dalam halaman semasa.
• Data masa nyata, menunjukkan semua perubahan keadaan stor dan prop serta data komponen.
• Pemantau acara, menunjukkan peristiwa yang dicetuskan oleh semua komponen dan parameternya serta nilai pulangan.

Memasang Vue Devtools adalah sangat mudah. Hanya cari "Vue Devtools" dalam penyemak imbas anda dan ikuti proses pemasangan sambungan penyemak imbas.

Uti Ujian Vue

Uti Ujian Vue ialah perpustakaan alat ujian yang disokong secara rasmi untuk menulis ujian unit dan ujian hujung ke hujung. Vue Test Utils menyediakan satu set alat berguna, termasuk:

• Seorang pelari ujian yang boleh dijalankan dalam Node.js dan penyemak imbas.
• Menyediakan beberapa cara manual dan automatik untuk mencipta dan memusnahkan komponen Vue.
• Menyediakan beberapa kaedah simulasi untuk komponen Vue untuk memudahkan ujian.

Memasang Uti Ujian Vue adalah mudah. Hanya jalankan arahan berikut:

npm install --save-dev @vue/test-utils

Kemudian, import dan gunakan Vue Test Utils dalam fail ujian anda:

import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent)
    expect(wrapper.html()).toContain('Hello, World!')
  })
})

Vue-i18n

Vue- i18n ialah perpustakaan pengantarabangsaan yang disokong secara rasmi untuk menyetempatkan aplikasi ke dalam bahasa lain. Vue-i18n menyediakan cara yang mudah dan fleksibel untuk menterjemah semua teks dalam aplikasi anda ke dalam bahasa lain.

Memasang Vue-i18n adalah mudah, cuma jalankan arahan berikut:

npm install vue-i18n

Kemudian, gunakan Vue-i18n dalam komponen Vue anda:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      hello: 'Hello, World!'
    },
    fr: {
      hello: 'Bonjour, Tout le Monde!'
    }
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Sekarang, gunakan kaedah $t dalam komponen anda untuk mendapatkan teks:

<template>
  <div>{{ $t('hello') }}</div>
</template>

Di atas ialah beberapa sambungan yang disyorkan untuk Vue. Sambungan ini boleh membantu anda membangunkan Vue.js dengan lebih cekap. Jika anda memerlukan lebih banyak sambungan atau bantuan lain, lihat dokumentasi rasmi Vue.js atau sumber komuniti.

Atas ialah kandungan terperinci Cara memasang sambungan yang disyorkan untuk vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!