1 Vue Router 集成
1.1 安装 vue-router
通过 pnpm 安装 Vue Router
pnpm i vue-router
1.2 配置 Router
在 src 文件夹下新建 views 文件夹，新建文件 Home.vue 和 About.vue
在 src 文件夹下新建 router 文件夹，在 router 下新建 index.ts 用来配置路由
//router/index.ts
import {createRouter,createWebHistory,type RouteRecordRaw
} from "vue-router";const routes: RouteRecordRaw[] = [{path: "/home",component: () => import("../views/Home.vue")},{path: "/about",component: () => import("../views/About.vue")}
];export default createRouter({routes, //路由表history: createWebHistory() //路由模式
});
1.3 引用 Router
在 main.ts 中引入路由
//main.ts
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";import router from "./router";const app = createApp(App);app.use(router);app.mount("#app");
在 App.vue 中添加入口
//App.vue
<script setup lang="ts">
import { RouterView } from "vue-router";
</script><template><RouterLink to="/home">首页</RouterLink><RouterLink to="/about">关于</RouterLink><RouterView></RouterView>
</template><style scoped></style>
1.4 运行项目
运行项目
npm run dev启动后，点击【首页】【关于】会显示对应页面内容
2. Pinia 集成
2.1 安装 Pinia
通过 pnpm 安装 Pinia
pnpm install pinia
2.2 配置 Pinia
在 src 文件夹下新建文件夹 stores，根据项目需要在 stores 下新建容器 ts 文件，此处示例新建文件 counter.ts
//counter.ts
import { defineStore } from "pinia";
import { ref } from "vue";export const useCounterStore = defineStore("counter", () => {//vue3中的setup函数const count = ref(0);const increment = () => {count.value++;};return { count, increment };
});
2.3 引用 Pinia
在 main.ts 中引入 Pinia
//main.ts
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";import router from "./router";
import { createPinia } from "pinia";const app = createApp(App);
const pinia = createPinia();app.use(router);
app.use(pinia);app.mount("#app");
在 App.vue 中应用
//App.vue
<template><RouterLink to="/home">首页</RouterLink><RouterLink to="/about">关于</RouterLink>{{ store.count }}<button @click="store.increment">+</button><RouterView></RouterView>
</template><script lang="ts" setup>
import { useCounterStore } from "./stores/counter";
const store = useCounterStore();
</script><style scoped></style>
2.4 运行项目
运行项目
npm run dev启动后，点击【+】按钮，数字相应增加
3 其他配置
3.1 配置别名
在 vite.config.ts 中配置别名，这样后续写路径更便捷
//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";// https://vite.dev/config/
export default defineConfig({resolve: {alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }]},plugins: [vue()]
});
这样路由中配置可修改成
//router/index.ts
import {createRouter,createWebHistory,type RouteRecordRaw
} from "vue-router";const routes: RouteRecordRaw[] = [{path: "/home",component: () => import("@/views/Home.vue")},{path: "/about",component: () => import("@/views/About.vue")}
];export default createRouter({routes, //路由表history: createWebHistory() //路由模式
});
3.2 配置 tsconfig
上面配置别名后，代码可以正常运行，但代码中会出现 TypeScrip 的飘红报错，还需修改一下 TypeScrip 的配置。
如图，TypeScrip 的配置文件有三个。
在Vue 3项目中，这三个 TypeScript 配置文件有不同的用途：
tsconfig.json: 这是项目的根配置文件，定义了TypeScript编译器的全局选项，比如编译目标、模块系统、包含和排除的文件等。
tsconfig.app.json: 这个文件通常继承自tsconfig.json，并为Vue应用的前端源代码提供特定的编译选项。它可能包含针对前端构建的优化设置，比如特定的路径别名或不同的编译输出目录。
tsconfig.node.json: 这个文件同样继承自tsconfig.json，但它是为Node.js环境中的代码（如服务器端渲染或构建脚本）设计的。它可能包含Node.js特定的编译选项，比如不同的模块解析策略。
简而言之，tsconfig.json 是基础配置，而 tsconfig.app.json 和 tsconfig.node.json 是针对不同运行环境的定制配置。
这里我们配置 tsconfig.app.json，添加 baseUrl 和 paths。
//tsconfig.app.json
{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true,"baseUrl": ".","paths": {"@/*": ["src/*"]}},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}
配置好以后，就不会报错了。（如果还有飘红，就重启编辑器即可）
3.3 安装 Vue-official 插件
如下图，在 vscode 中搜索 Vue-official 插件，安装 Vue-official 插件。
Vue-Official是 Vue 的 VSCode 官方插件，原名Volar，提供语法高亮、代码片段、智能感知和错误检查等功能，支持 Vue 2 和 Vue 3，特别适用于 Vue3.4 以上版本，新增了对Vue3.4 新特性的支持，如属性同名简写和拖拽导入组件。该插件集成了Vetur的功能并有所增强，建议在 Vue 3 项目中使用时禁用Vetur。
安装后，点击图标，选择【添加到工作区建议】。
点击后，会在项目文件夹 .vscode 下的 extensions.json 中添加配置，没有的话手动添加一下。
4 Element-plus 集成
4.1 安装 element-plus
通过 pnpm 安装 element-plus 组件库
pnpm install element-plus
4.2 引用 element-plus
在 main.ts 中引入 element-plus
//main.ts
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";import router from "./router";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";const app = createApp(App);
const pinia = createPinia();app.use(router);
app.use(pinia);
app.use(ElementPlus);
app.mount("#app");
修改 tsconfig.app.json 配置，增加 element-plus 类型提示
配置好后，在页面中应用 element-plus 组件就会有提示，这样可以提高开发效率。
在 App.vue 中应用
//App.vue
<template><RouterLink to="/home">首页</RouterLink><RouterLink to="/about">关于</RouterLink>{{ store.count }}<button @click="store.increment">+</button><RouterView></RouterView><el-button type="primary">按钮</el-button>
</template><script lang="ts" setup>
import { useCounterStore } from "./stores/counter";
const store = useCounterStore();
</script><style scoped></style>
4.4 运行项目
运行项目
npm run dev启动后，可正常显示 element-plus 组件
以上，我们的代码基本就搭建好了。
下一篇将探讨样式图标、按需导入等内容，敬请期待~