Cara mengimport rangka kerja Vue ke dalam program mini

Hari ini dengan perkembangan Internet mudah alih yang semakin meningkat, program mini telah menjadi bahagian yang amat diperlukan dalam kehidupan pengguna. Sebagai pembangun, kami bukan sahaja perlu memahami pembangunan konvensional program kecil, tetapi juga perlu sentiasa mempelajari teknologi dan rangka kerja baharu untuk meningkatkan kecekapan pembangunan dan kualiti program kecil. Rangka kerja Vue ialah salah satu teknologi yang disyorkan.

Vue.js ialah rangka kerja MVVM ringan yang boleh membangunkan aplikasi satu halaman (SPA) dengan cepat dan menggunakan Vue dalam program kecil boleh meningkatkan kecekapan pembangunan dan kebolehgunaan semula kod dengan banyak. Artikel ini akan memperkenalkan cara mengimport rangka kerja Vue ke dalam program mini.

1. Pasang rangka kerja Vue

Pertama, kita perlu memasang rangka kerja Vue dalam program mini. Anda boleh memasangnya melalui npm atau memuat turun Vue.js secara manual. Berikut menerangkan operasi khusus kaedah pemasangan npm:

1. Buka alat baris arahan dan masukkan direktori akar projek program mini;

Pasang rangka kerja Vue "mpvue" program mini

npm install vue --save

3. 2. Buat halaman Vue

npm install mpvue --save-dev

Selepas memasang Rangka kerja Vue, kita perlu mencipta rangka kerja Vue baharu dalam projek program mini Buat halaman Vue dalam.

Dalam direktori halaman program mini, cipta folder vue baharu untuk menyimpan fail halaman Vue; kod. Contohnya, kami mencipta fail .vue baharu bernama "index.vue";

Dalam fail index.vue, tulis kod Vue. Berikut ialah contoh kod untuk rujukan anda:
2. 3 Halaman program mini Pendaftaran
3. Kami telah mencipta halaman Vue, dan seterusnya kami perlu mendaftarkannya sebagai mini. halaman program.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">修改信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎来到Vue小程序'
    }
  },
  methods: {
    changeMessage() {
      this.message = '修改信息成功'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #f00;
  font-size: 16px;
}
</style>

Dalam main.js projek program mini, import mpvue dan Vue.js

1. Import komponen index.vue kami

import Vue from 'vue'
import Mpvue from 'mpvue'
import MpvueRouter from 'mpvue-router'

Vue.use(Mpvue)
Vue.use(MpvueRouter)

2. Daftar halaman index.vue sebagai halaman program mini dalam konfigurasi penghalaan projek program mini

import index from './pages/vue/index.vue'

4. Tulis masuk ke Halaman program mini
3. Kami telah melengkapkan pendaftaran halaman Vue, dan seterusnya kami perlu menulis halaman kemasukan program mini.

const routes = [
  {
    path: '/pages/vue/index',
    component: index
  }
]

Dalam main.js projek program mini, tentukan Aplikasi program mini

1. Selepas melengkapkan langkah di atas, kita boleh Akses halaman Vue berdaftar.

import App from './App.vue'
import router from './router'

const app = new Vue({
  router,
  ...App
})
app.$mount()

Berikut ialah ringkasan keseluruhan proses mengimport rangka kerja Vue:

2. Pasang rangka kerja Vue;

Buat halaman Vue dan tulis Vue kod;

Daftar halaman program mini;
2. Perkara di atas adalah mengenai cara mengimport rangka kerja Vue ke dalam program mini. Saya harap ia akan membantu semua orang. Dalam pembangunan, penggunaan teknologi dan rangka kerja yang rasional bukan sahaja dapat meningkatkan kecekapan pembangunan, tetapi juga meningkatkan kualiti dan pengalaman pengguna program mini dengan lebih baik.

Atas ialah kandungan terperinci Cara mengimport rangka kerja Vue ke dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!