Cara membuat aplikasi surat berita menggunakan Vue

Cara membuat aplikasi surat berita menggunakan Vue

Dalam era ledakan maklumat hari ini, permintaan orang ramai terhadap berita hal ehwal semasa terus meningkat. Untuk memenuhi keperluan ini, kami boleh menggunakan Vue untuk mencipta aplikasi surat berita. Vue ialah rangka kerja JavaScript popular yang membantu kami membina antara muka pengguna interaktif.

Berikut ialah panduan langkah demi langkah untuk membantu anda membuat apl surat berita menggunakan Vue.

1. Persediaan
   Pertama, kita perlu mencipta projek Vue baharu. Anda boleh menggunakan Vue CLI untuk membuat projek dengan cepat, yang akan menjana struktur projek asas untuk anda. Selepas memasang Vue CLI, anda boleh mencipta projek Vue baharu menggunakan arahan berikut:

vue create news-app

2. Pasang dependencies yang diperlukan
   Selepas mencipta projek, kami perlu memasang beberapa dependencies yang diperlukan. Jalankan arahan berikut dalam direktori akar projek:

cd news-app
npm install axios vue-router

• axios: klien HTTP yang biasa digunakan yang akan kami gunakan untuk mendapatkan data berita.
• vue-router: Pemalam penghalaan yang disediakan secara rasmi oleh Vue, digunakan untuk mengurus halaman aplikasi yang berbeza.

3. Sediakan laluan
   Kami perlu menyediakan laluan untuk menavigasi ke halaman berbeza dalam aplikasi. Buka fail src/router/index.js dan ubah suainya mengikut contoh berikut:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import News from '../views/News.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/news',
    name: 'news',
    component: News
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dalam kod di atas, kami mentakrifkan dua laluan:

• /: laluan akar, sepadan dengan komponen Laman Utama.
• /berita: Laluan berita, sepadan dengan komponen Berita.

4. Buat komponen
   Seterusnya, kita perlu mencipta dua komponen: Laman Utama dan Berita. Cipta dua komponen ini di bawah folder src/views dan tulis gaya dan templat yang berkaitan.

Home.vue:

<template>
  <div>
    <h1>Welcome to News App</h1>
    <router-link to="/news">Go to News</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

News.vue:

<template>
  <div>
    <h2>Top News</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'News',
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    this.fetchArticles()
  },
  methods: {
    fetchArticles() {
      axios.get('<API_URL>').then(response => {
        this.articles = response.data
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

Dalam komponen Berita, kami menggunakan perpustakaan axios untuk mendapatkan data berita. Anda perlu menggantikan dengan antara muka data berita sebenar.

5. Kemas kini App.vue
   Kami juga perlu mengemas kini fail App.vue untuk memaparkan halaman yang berbeza dalam aplikasi. Buka src/App.vue dan ubah suainya seperti contoh berikut:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

6. Jalankan aplikasi
   Sekarang kami telah selesai menulis aplikasi surat berita kami. Jalankan arahan berikut untuk melancarkan aplikasi:

npm run serve

Anda akan melihat halaman selamat datang dalam pelayar anda. Klik pautan "Pergi ke Berita" dan aplikasi akan melompat ke halaman berita dan memaparkan data berita sebenar daripada API.

Dengan langkah di atas, anda telah berjaya mencipta aplikasi surat berita mudah menggunakan Vue. Dalam aplikasi sebenar, anda boleh menambah lebih banyak fungsi mengikut keperluan anda, seperti pengesahan pengguna, klasifikasi berita, dsb.

Saya harap artikel ini membantu anda dan saya ucapkan selamat berprogram!

Atas ialah kandungan terperinci Cara membuat aplikasi surat berita menggunakan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!