Sene başında Vue3.0 resmi olarak çıktı ve birçok firma üretime aldı.Vue3.0 front-end pazarında en popüler teknolojilerden biri haline geldi.
Vue3.0 karşısında kimileri endişelenirken kimileri seviniyor. Endişe sebebi öğrenmesinin kolay olmaması, çok sayıda API olması ve kod paradigmasının çeşitlendirilmiş olması; sevinme sebebi ise Vue3.
Dokümantasyon en iyi öğrenme materyali olmasına rağmen, yeni başlayanlar için yeterince kolay değildir. Bu yüzden burada, ihtiyacı olanlara yardım etmeyi umarak eksiksiz bir Vue3.0 öğreticisi çıkarmaya çalışıyorum. 2022'de Vue 3.0 kesinlikle daha fazla dikkat çekecek, hazır mısınız?

1. Vue3.0 ortam yapısı

• Bir Vue (3.2.30) projesi oluşturmak için vite kullanın

npm install yarn -g
yarn create vite vue3-project --template vue
cd vue3-project //Proje kök dizini
yarn //Bağımlılıkları yükle
yarn dev //Yerel hizmeti başlat

vue-router, vuex aile grubunu kurun

yarn add vue-router@latest // v4.0.14
yarn add vuex@latest // v4.0.2

UI bileşen kitaplığını yükleyin: Vue3 ortamında, Vue3'ü destekleyen bir bileşen kitaplığı bulmanız gerekir ve bu Vue2 bileşen kitaplıkları kullanılamaz.

yarn add ant-design-vue@next // v2.2.8
yarn add vite-plugin-components --dev // talep üzerine ant-design-vue import desteği

• Talep üzerine ant-design-vue bileşen içe aktarmayı destekler

# vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'

// https://vitejs.dev/config/
export default defineConfig({ plugins: [ vue(), ViteComponents({ customComponentResolvers: [AntDesignVueResolver()], }) ]
})

• Sass stili söz dizimi desteği

yarn add sass // v1.49.9

1. main.js giriş dosyası

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

import "ant-design-vue/dist/antd.css"

const app = createApp(App)
// Genel özellikleri yapılandırın (Vue.prototype artık burada kullanılamaz)
app.config.globalProperties.$http = ''

app.use(router) // yönlendirme sistemini kaydet
app.use(store) // Durum yönetimini kaydet
// genel yönerge
app.directive('highlight', { beforeMount(el, binding, vnode) { el.style.background = binding.value }
})
app.mount('#app')

2. Vue-Router'ın ayrıntılı açıklaması (v4)

• Not: vue3 ortamında vue-router (v4) kullanmalısınız.
• Yönlendirici oluşturmak için createRouter() işlevini kullanın.
• Yönlendirme modunu belirtin ve geçmiş özniteliğini kullanın: createWebHashHistory/createWebHistory()
• Rota kaydı, mian.js'de app.use(router)
• Mevcut proje, geliştirme için kesinlikle birleştirilmiş API'yi kullanıyorsa, geliştirme için useRoute ve userRouter gibi Hooks API'lerini kullanmalıdır.
• <router-link> etiket özniteliğine sahip değilse, özel ve yuvalarla özelleştirilebilir.
• <router-view>, son derece güçlü bir "slot" işlevi ekledi. Yönlendirmedeki sözde kodu görün. <keep-alive> ve <transition> animasyonlarını uygulamak daha kolay hale gelecek ve ayrıca Askıya Alma ile Yükleme'yi uygulayabilir.
• Birkaç kombinasyon API'si eklendi: useRoute/useRouter/useLink.
• vue-router ( v3) ve vue-router (v4) değişikliklerini sorgulayın: https://router.vuejs.org/guide/migration/index.html

Yönlendirme yapılandırmasını Vue3 ortamında yazın, referans kodu aşağıdaki gibidir:

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

const Home = () => import('@/pages/study/Home.vue')
const Find = () => import('@/pages/study/Find.vue')
const User = () => import('@/pages/study/User.vue')
const Cnode = () => import('@/pages/cnode/index.vue')

export default createRouter({  history: createWebHashHistory(),
  routes: [    {      path: '/home',      component: Home,      meta:{transition: 'fade', isAlive: true }    },    { path: '/find', component: Find },    { path: '/user', component: User },    { path: '/cnode', component: Cnode }  ]
})