Vue 3 + Vite + organisation des notes TS

Vue 3

Changements de Vue2 à Vue3

• Optimisation des performances
• Volume d'emballage réduit
• Vitesse de rendu améliorée
• Mieux vaut adopter la dactylographie
• La mise à niveau du code source utilise un proxy pour implémenter la réactivité
• Ajouter une API de composition
• Ajoutez de nouveaux composants Suspense Fragment Teleport et plus encore
• v-si et v-pour les changements de priorité, l'ordre dans le code source est différent
• Dom virtuel reconstruit

Créé par Vite

npm initialiser vite

npm run preview démarre le serveur qui fournit un aperçu (l'aperçu est l'effet packagé)

Configurer l'alias du chemin du projet

tsconfig.json

"baseUrl": "./",
"paths": {
    
    
    "@/*": ["src/*"],
    "#/*": ["types/*"]
}

vite.config.ts

Pour installer @type/node

npm install -D @type/node

Configuration

import {
    
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [vue()],
  resolve: {
    
    
    alias: {
    
    
      "@": path.join(__dirname, "src"),
      "#": path.join(__dirname, "types"),
    },
  },
});

Configurer le routage

routeur.ts

import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes:RouteRecordRaw[] = [
    {
    
    
        path:'/home',
        name:'home',
        component:() => import('../pages/home/home.vue')
    }
]

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

export default router

main.ts

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './routers'

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

Initialisation du routage encapsulé

routeur.ts

import {
    
     App } from "vue";
import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    
    
    path: "/home",
    name: "home",
    component: () => import("../pages/home/home.vue"),
  },
];

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

// 封装路由初始化
export const initRouter = (app: App<Element>) => {
    
    
  app.use(router);
};

// export default router

main.ts

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
    
    initRouter} from './routers'

const app = createApp(App)
initRouter(app)
app.mount('#app')

Manuscrit

Introduction

Typescript est un sur-ensemble de JS. Il étudie principalement les types primitifs, les types littéraux, les types de tableaux, les types de fonctions, les types de classes, les types d'interfaces, les alias de types, les types d'union et d'intersection, les types d'énumération, les génériques et autres éléments de type dans ts, ainsi que l'inférence de type. , assertion de type, réduction de type, amplification de type et autres fonctionnalités.

Par rapport à la programmation JS, l'écriture de TS est plus rigoureuse

initialisation tsc

tsc init

Compilez le fichier ts dans le dossier du projet actuel dans le répertoire spécifié et activez la surveillance.

tsc -p tsconfig.json --watch