unplugin vue router

إلغاء البرنامج المساعد vue-router

التوجيه التلقائي للملفات في Vue مع دعم TS

• عرض StackBlitz

يعمل هذا المكون الإضافي وقت البناء على تبسيط إعداد التوجيه الخاص بك ويجعله أكثر أمانًا وأسهل في الاستخدام بفضل TypeScript. يتطلب جهاز توجيه Vue >=4.4.0.

تحذير

على الرغم من أن التوجيه المكتوب unplugin-vue-router والتوجيه المستند إلى الملف مستقر بشكل أساسي، إلا أنه يحتوي على واجهات برمجة التطبيقات التجريبية الأخرى التي تخضع للتغيير (مثل أدوات تحميل البيانات). تأكد من مراجعة الوثائق ذات الصلة للحصول على أحدث المعلومات. إذا وجدت أي مشكلة أو خلل في التصميم أو لديك أفكار لتحسينه، فيرجى فتح مشكلة أو مناقشة.

ثَبَّتَ

npm i -D unplugin-vue-router

أضف البرنامج المساعد VueRouter قبل البرنامج المساعد Vue:

فيت

 // vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig ( {
  plugins : [
    VueRouter ( {
      /* options */
    } ) ,
    // ️ Vue must be placed after VueRouter()
    Vue ( ) ,
  ] ,
} )

مثال: playground/

تراكمي

 // rollup.config.js
import VueRouter from 'unplugin-vue-router/rollup'

export default {
  plugins : [
    VueRouter ( {
      /* options */
    } ) ,
    // ️ Vue must be placed after VueRouter()
    Vue ( ) ,
  ] ,
}

حزمة الويب

 // webpack.config.js
module . exports = {
  /* ... */
  plugins : [
    require ( 'unplugin-vue-router/webpack' ) ( {
      /* options */
    } ) ,
  ] ,
}

فيو كلي

 // vue.config.js
module . exports = {
  configureWebpack : {
    plugins : [
      require ( 'unplugin-vue-router/webpack' ) ( {
        /* options */
      } ) ,
    ] ,
  } ,
}

esbuild

 // esbuild.config.js
import { build } from 'esbuild'
import VueRouter from 'unplugin-vue-router/esbuild'

build ( {
  plugins : [ VueRouter ( ) ] ,
} ) 

يثبت

بعد التثبيت، يجب عليك تشغيل خادم التطوير الخاص بك (عادةً npm run dev ) لإنشاء الإصدار الأول من الأنواع . ثم تحتاج إلى إضافة الأنواع إلى tsconfig.json الخاص بك.

{
  "include" : [
    // ...
    " ./typed-router.d.ts "
  ],
  // ...
  "compilerOptions" : {
    // ...
    "moduleResolution" : " Bundler "
    // ...
  }
}

بعد ذلك، إذا كان لديك ملف env.d.ts مثل الملف الذي تم إنشاؤه بواسطة npm vue create ، فأضف أنواع unplugin-vue-router/client إليه:

 // env.d.ts
/// 
/// 

إذا لم يكن لديك ملف env.d.ts ، فيمكنك إنشاء ملف وإضافة أنواع unplugin-vue-router إليه أو يمكنك إضافتها إلى خاصية types في tsconfig.json :

{
  "compilerOptions" : {
    // ...
    "types" : [ " unplugin-vue-router/client " ]
  }
}

أخيرًا، قم باستيراد المسارات التي تم إنشاؤها من vue-router/auto-routes وتمريرها إلى جهاز التوجيه:

import { createRouter, createWebHistory } from 'vue-router'
+ import { routes } from 'vue-router/auto-routes'

createRouter({
  history: createWebHistory(),
  // pass the generated routes written by the plugin ?
+  routes,
})

وبدلاً من ذلك، يمكنك أيضًا استيراد مصفوفة routes وإنشاء جهاز التوجيه يدويًا أو تمريره إلى بعض المكونات الإضافية. هنا مثال مع بداية Vitesse:

 import { ViteSSG } from 'vite-ssg'
 import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
 import type { UserModule } from './types'
- import generatedRoutes from '~pages'
+ import { routes } from 'vue-router/auto-routes'

 import '@unocss/reset/tailwind.css'
 import './styles/main.css'
 import 'uno.css'

- const routes = setupLayouts(generatedRoutes)

 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,
   {
-   routes,
+   routes: setupLayouts(routes),
    base: import.meta.env.BASE_URL
  },
   (ctx) => {
     // install all modules under `modules/`
     Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
       .forEach(i => i.install?.(ctx))
   },
 )

• تحقق أكثر في الوثائق.

رخصة

معهد ماساتشوستس للتكنولوجيا