Vue3+TS+Vite开发技巧：如何构建可维护、可扩展的应用架构

npm init vite@latest

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const message = ref('Hello, World!');
</script>

// 祖先组件
<script setup lang="ts">
import { provide } from 'vue';
import { userData } from './data';

provide('userData', userData);
</script>

// 后代组件
<script setup lang="ts">
import { inject } from 'vue';

const userData = inject<UserData>('userData');
</script>

// 子组件
<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
  emit('update:count', count.value);
}
</script>

<template>
  <div>
    <button @click="increment">增加</button>
    <p>{{ count }}</p>
  </div>
</template>

// 父组件
<template>
  <div>
    <ChildComponent :count.sync="count" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

import { reactive } from 'vue';

export interface State {
  count: number;
}

const state = reactive<State>({
  count: 0,
});

export function increment() {
  state.count++;
}

<script setup lang="ts">
import { ref } from 'vue';
import { increment } from '../store';

const count = ref(0);
const handleIncrement = () => {
  increment();
}
</script>

<template>
  <div>
    <button @click="handleIncrement">增加</button>
    <p>{{ count }}</p>
  </div>
</template>

npm install vue-router@4

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
];

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

export default router;

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

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

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>