开头
你好！为了不让我第一次开发的服务端孤家寡人，当然是需要配套上前端的
框架的选择
这里选用的是vue3+pinia+ts，之前也是一直用js去写项目，这次改用ts，要跳出舒适圈
创建项目
首先使用vite创建项目
npm create vite@latest my-project -- --template vue-ts
cd my-project
然后安装依赖
# 安装核心依赖
npm install
# 安装 Pinia
npm install pinia
配置 Pinia，在main.ts中配置
import {
createApp } from 'vue'
import {
createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
测试pinia
先创建一个store示例，在 stores/counter.ts 中
import {
defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})
接下来去掉App.vue和components/HelloWorld.vue中多余的内容
App.vue
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
</style>
components/HelloWorld.vue
<script setup lang="ts">
import {
useCounterStore } from "../stores/counter";
const counterStore = useCounterStore();
defineProps<{
msg: string }>();
</script>
<template>
<div>
<button @click="counterStore.increment">{
{
counterStore.count }}</button>
</div>
</template>
<style scoped>
</style>
这里通过如下代码成功的调用了store里pinia管理的数据和方法
import {
useCounterStore } from "../stores/counter";
const counterStore = useCounterStore();
counterStore.increment counterStore.count
但是每次都需要在前面加上counterStore.***去调用，个人习惯用toRefs去解构变量，解构方法（不知有没有什么弊端）如下，也是一样的正常使用
<script setup lang="ts">
import {
toRefs } from "vue";
import {
useCounterStore } from "../stores/counter";
// 使用解构赋值
const counterStore = useCounterStore();
const {
count } = toRefs(counterStore); //变量
const {
increment } = counterStore; //方法
defineProps<{
msg: string }>();
</script>
<template>
<div>
<button @click="increment">{
{
count }}</button>
</div>
</template>
<style scoped></style>
在我的引用中，常常会用到如下直接在src或者config下的文件，麻烦起来前面不知道要加上多少个 …/…/…/
import {
useCounterStore } from "../stores/counter";
所以我做出如下配置
tsconfig.app.json
"compilerOptions": {
//原有代码
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"_conf/*": ["./config/*"]
}
},
vite.config.ts
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
fileURLToPath, URL } from "node:url";
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
_conf: fileURLToPath(new URL("./config", import.meta.url)),
},
},
});
这里需要安装@types/node
npm install @types/node
然后在项目中就可以这样引用了，路径就等于/src/stores/counter
import {
useCounterStore } from "@/stores/counter";
项目结构设计
src/
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── stores/ # Pinia 状态管理
├── types/ # TypeScript 类型定义
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue # 根组件
└── main.ts # 入口文件
安装路由
npm install vue-router@4
然后在main.ts引入
import {
createApp } from "vue";
import {
createPinia } from "pinia";
import router from "./router";
import App from "./App.vue";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.use(router);
app.mount("#app");
在views中创建Home和About两个vue文件，内容随意，然后在router里创建index.ts
import {
createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/About",
name: "About",
component: () => import("@/views/About.vue"),
},
{
path: "/Home",
name: "Home",
component: () => import("@/views/Home.vue"),
},
],
});
export default router;
最后在App.vue中修改代码，到这路由就算配置完成了
<script setup lang="ts">
</script>
<template>
<nav>
<router-link to="/Home">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<RouterView />
</template>
<style scoped>
</style>
结尾
用于记录，有错就改，没错也改