Vue 3 + Vite + TS笔记整理

Vue3

Vue2 到 Vue3的变化

• 性能优化
• 打包体积减少
• 渲染速度提高
• 更好的拥抱了typescript
• 源码升级使用proxy代理实现响应式
• 添加组合式API
• 添加新的组件 Suspense Fragment Teleport等等
• v-if 和 v-for优先级更改，源码中循序不同
• 重构了虚拟dom

Vite 创建

npm init vite

npm run preview 启动提供预览的服务器（预览的是打包的效果）

配置项目路径别名

tsconfig.json

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

vite.config.ts

要安装 @type/node

npm install -D @type/node

配置

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"),
    },
  },
});

配置路由

router.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')

封装路由初始化

router.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')

TypeScript

简介

Typescript 是 JS 的超集，主要学习 ts 里面的原始类型、字面量类型、数组类型、函数类型、类类型、接口类型、类型别名，联合与交叉类型、枚举类型、泛型等类型元素，以及类型推断、类型断言、类型缩小、类型放大等特性。

相比JS编程，编写TS更加严谨

tsc初始化

tsc init

编译当前项目文件夹的ts文件到指定的目录下并开启监视，

tsc -p tsconfig.json --watch