Tutorial pengenalan pembangunan VUE3: menggunakan Vue.js untuk mencapai penyelesaian pembangunan sehenti

Vue.js ialah rangka kerja JavaScript popular yang sangat memudahkan proses membina aplikasi web. Vue.js menggunakan corak MVC pada pembangunan web Ia menggabungkan idea pemaparan deklaratif dan komponenisasi, membolehkan pembangun membina aplikasi web dengan lebih pantas dan lebih mudah. Artikel ini akan memperkenalkan VUE3, versi baharu rangka kerja Vue.js dan menggunakan VUE3 untuk melaksanakan penyelesaian pembangunan sehenti.

1. Pengenalan kepada rangka kerja VUE3

Vue.js ialah rangka kerja JavaScript yang dibuat oleh You Yuxi. Matlamatnya adalah untuk membantu pembangun membina Web yang boleh digunakan semula.

Vue.js menyediakan seni bina MVC asas Di bawah rangka kerja ini, pembangun boleh menggunakan sintaks deklaratif Vue.js untuk menerangkan gelagat dan status komponen UI.

Vue.js 3 ialah versi terbaharu rangka kerja Vue.js Ia telah membuat banyak peningkatan dalam prestasi dan kebolehbacaan, dan juga mengukuhkan keupayaan penyahpepijatan dan ujian pembangun, yang akan memanfaatkan pembangunan web masa hadapan. Leftenan Jeneral lebih penting.

2. Ciri rangka kerja VUE3

Perkara yang paling patut diberi perhatian tentang rangka kerja VUE3 ialah prestasinya Berbanding dengan versi VUE2 sebelumnya, VUE3 telah meningkatkan pemprosesan DOM maya DOM boleh dikemas kini dengan lebih cekap, mengurangkan masa pemaparan dan penggunaan memori.

Kedua, VUE3 juga menambah baik sokongan TypeScript boleh digunakan untuk menangkap ralat semasa menulis kod, meningkatkan kebolehselenggaraan aplikasi.

Rangka kerja VUE3 juga menyediakan API gubahan baharu dan mengalihkan pengkompil templat ke dalam pakej yang berasingan. Ini membolehkan pembangun memisahkan keadaan dengan lebih baik daripada UI dan memudahkan pembangunan rangka kerja.

3. Penyelesaian pembangunan sehenti

Kini, kami akan menggunakan VUE3 untuk melaksanakan penyelesaian pembangunan sehenti yang mudah. Dalam aplikasi ini, kami akan melaksanakan log masuk, pendaftaran dan pengurusan data mudah.

1. Buat projek VUE3 baharu

Mula-mula, kita perlu memasang Vue.js. Di sini kami menggunakan Vue CLI, yang membolehkan kami membuat projek dan menambah pemalam dengan lebih mudah.

Masukkan arahan berikut dalam terminal untuk mencipta projek VUE3 baharu:

vue create vue3-app

Dengan mengandaikan anda telah memasang dan menyediakan Vue CLI, arahan ini akan mencipta projek VUE3 baharu dan struktur fail asas.

2. Buat halaman log masuk mudah

Buat komponen baharu Login.vue dalam folder src/components. Komponen Log Masuk akan mengandungi borang log masuk untuk pengguna log masuk ke aplikasi.

<template>
  <form @submit.prevent="login">
    <label for="email">邮箱</label>
    <input type="email" id="email" v-model="email" required>

    <label for="password">密码</label>
    <input type="password" id="password" v-model="password" required>

    <button type="submit">登录</button>
  </form>
</template>

<script>
  import { ref } from 'vue'

  export default {
    name: 'Login',

    setup() {
      const email = ref('')
      const password = ref('')

      const login = () => {
        console.log(`Logging in with email ${email.value} and password ${password.value}`)
      }

      return {
        email,
        password,
        login
      }
    }
  }
</script>

Pada ketika ini, kami mempunyai borang log masuk mudah yang mengumpulkan e-mel dan kata laluan pengguna dan membolehkan pengguna log masuk ke aplikasi. Kod di sini menggunakan API Komposisi Vue.js 3 untuk memisahkan keadaan dan gelagat komponen dengan lebih baik.

3. Buat halaman pendaftaran

Buat Register.vue komponen baharu dalam folder src/components. Komponen Daftar akan mengandungi borang pendaftaran untuk pengguna mendaftar dan menyertai aplikasi.

<template>
  <form @submit.prevent="register">
    <label for="name">姓名</label>
    <input type="text" id="name" v-model="name" required>

    <label for="email">邮箱</label>
    <input type="email" id="email" v-model="email" required>

    <label for="password">密码</label>
    <input type="password" id="password" v-model="password" required>

    <button type="submit">注册</button>
  </form>
</template>

<script>
  import { ref } from 'vue'

  export default {
    name: 'Register',

    setup() {
      const name = ref('')
      const email = ref('')
      const password = ref('')

      const register = () => {
        console.log(`Registering with name ${name.value}, email ${email.value} and password ${password.value}`)
      }

      return {
        name,
        email,
        password,
        register
      }
    }
  }
</script>

Begitu juga, di sini kami telah mencipta borang pendaftaran yang mengumpulkan nama pengguna, e-mel dan kata laluan. Borang akan memanggil kaedah komponen semasa penyerahan untuk menghantar data ini ke pelayan untuk pendaftaran.

4. Buat halaman pengurusan data

Buat komponen baharu Data.vue dalam folder src/components. Komponen Data akan mengandungi jadual yang memaparkan data pengguna dan juga akan menyediakan pilihan untuk menambah, mengedit, melihat dan memadam item data.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
          <td>
            <button @click="view(item)">查看</button>
            <button @click="edit(item)">编辑</button>
            <button @click="delete(item)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div>
      <button @click="add">添加数据</button>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    name: 'Data',

    setup() {
      const data = ref([
        { id: 1, name: '张三', email: 'zhangsan@abc.com' },
        { id: 2, name: '李四', email: 'lisi@abc.com' },
        { id: 3, name: '王五', email: 'wangwu@abc.com' }
      ])

      const add = () => {
        console.log('Adding a new data item')
      }

      const edit = (item) => {
        console.log(`Editing data item with id ${item.id}`)
      }

      const deleteItem = (item) => {
        console.log(`Deleting data item with id ${item.id}`)
      }

      const view = (item) => {
        console.log(`Viewing data item with id ${item.id}`)
      }

      return {
        data,
        add,
        edit,
        deleteItem,
        view
      }
    }
  }
</script>

Dalam kod ini, kami mencipta jadual data untuk memaparkan data pengguna. Jadual juga mengandungi satu set butang untuk menambah, melihat, mengedit dan memadam item data. Di sini kami hanya mengeluarkan beberapa maklumat penyahpepijatan, tetapi dalam pembangunan sebenar, kami perlu memautkan operasi ini kepada API sebelah pelayan.

5. Gunakan Penghala Vue untuk melaksanakan penghalaan

Sekarang kita telah mencipta tiga komponen Log Masuk, Daftar dan Data, seterusnya, kita perlu menggunakan Penghala Vue untuk menggabungkannya .

Laksanakan arahan berikut dalam terminal untuk memasang Penghala Vue:

npm install --save vue-router@next

Di sini, kami menggunakan teg @next untuk menunjukkan bahawa kami sedang memasang versi Vue.js 3.

Buat fail router.js baharu dalam folder src/router:

import { createRouter, createWebHistory } from 'vue-router'

import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Data from '../components/Data.vue'

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/data', component: Data }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Dalam kod ini, kami mentakrifkan tatasusunan routes, yang mengandungi tiga laluan. Fungsi createRouter mencipta contoh laluan baharu dan mengeksportnya untuk digunakan dalam fail lain.

6. Panggil pelbagai komponen dalam App.vue

Dalam src/App.vue, kami mencipta menu navigasi ringkas untuk memanggil komponen Log Masuk, Daftar dan Data.

<template>
  <div id="app">
    <nav>
      <ul>
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/register">注册</router-link></li>
        <li><router-link to="/data">数据</router-link></li>
      </ul>
    </nav>

    <router-view></router-view>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
})
</script>

<style>
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: blue;
}
</style>

Di sini kami menggunakan komponen b988a8fd72e5e0e42afffd18f951b277 untuk mentakrifkan menu navigasi.

Akhir sekali, dalam src/main.js, kami mencipta contoh Vue.js baharu dan memautkannya ke Penghala Vue:

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

Sekarang, penyelesaian pembangunan sehenti mudah kami Pelan ini mempunyai telah selesai. Menggunakan kod di atas, anda boleh membina aplikasi web dengan cepat, dan aplikasi ini akan mempunyai semua kelebihan Vue.js, termasuk pemaparan pantas, prestasi dioptimumkan dan kod yang boleh diselenggara.

Atas ialah kandungan terperinci Tutorial pengenalan pembangunan VUE3: menggunakan Vue.js untuk mencapai penyelesaian pembangunan sehenti. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!