vue3+vite+ts+router4+Pinia+Axios+sass 从0到1搭建

1、使用vite构建项目

npm create vite@latest

填写项目名的时候不能大写

2、跑起来之后配置下@

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录}},
})

配置之后会跑一个类型没有声明的错误，path 模块是 Node.js 的一部分，因此如果你使用 TypeScript，需要安装 Node.js 的类型声明文件

npm install --save-dev @types/node

下载这个就能解决爆红的问题了

3、建立标准目录

├── publish/
└── src/
├── assets/ // 静态资源目录
├── common/ // 通用类库目录
├── components/ // 公共组件目录
├── router/ // 路由配置目录
├── store/ // 状态管理目录
├── style/ // 通用 CSS 目录
├── utils/ // 工具函数目录
├── views/ // 页面组件目录
├── App.vue
├── main.ts
├── shims-vue.d.ts
├── tests/ // 单元测试目录
├── index.html
├── tsconfig.json // TypeScript 配置文件
├── vite.config.ts // Vite 配置文件
└── package.json

4、安装路由vue2使用3的路由vue3使用4的路由

1、下载

npm i vue-router@4

2、在router下创建index.ts

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import Home from '@/views/Home.vue'  // 确保有一个 Home.vue 组件
import About from '@/views/Login.vue'  // 确保有一个 About.vue 组件// 定义路由配置
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]// 创建并导出路由实例
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),  // 使用 Vue 3 中的 history 模式routes
})export default router

第一个注意点import type { RouteRecordRaw } from 'vue-router'这个引入type

第二个注意点找不到模块“@/views/Home.vue”或其相应的类型声明

在src底下创建shims-vue.d.ts 文件，放置在项目的 src 目录下（通常是 src/shims-vue.d.ts）

里面的内容是
// src/shims-vue.d.ts
declare module '*.vue' {import { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component}
这样就不会报错了原因如下：

使用 shims-vue.d.ts 的作用

告诉 TypeScript 识别 .vue 文件：通过这个声明文件，TypeScript 会知道 .vue 文件是一个 Vue 组件，并且可以正确地推断出这些组件的类型。
避免类型错误：如果没有这个声明，TypeScript 会认为 .vue 文件是无法处理的，导致编译错误。通过这个文件，TypeScript 会认为 .vue 文件导出的对象是一个符合 DefineComponent 类型的 Vue 组件，从而不会报错。

3、挂载main.ts上

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'createApp(App).use(router).mount('#app')// 使用 .use(router)：通过 .use(router) 将路由器插件添加到应用中。
// .mount('#app')：最后挂载应用到页面上的 #app 元素。

5、状态管理pinia

1、下载pinia

npm install pinia

2、main.ts使用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'const app = createApp(App)// 使用 Pinia 和 Router 插件
app.use(createPinia())  // 添加 Pinia 插件
app.use(router)  // 添加 Router 插件// 挂载到 #app 元素
app.mount('#app')

3、/ stores/index.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'const app = createApp(App)// 使用 Pinia 和 Router 插件
app.use(createPinia())  // 添加 Pinia 插件
app.use(router)  // 添加 Router 插件// 挂载到 #app 元素
app.mount('#app')

6、安装Element Plus

1、下载Element Plus

npm i element-plus

2、全局引入main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'  // 引入 Element Plus 样式const app = createApp(App)// 使用 Pinia 和 Router 插件
app.use(createPinia())  // 添加 Pinia 插件
app.use(router)  // 添加 Router 插件// 使用 Element Plus
app.use(ElementPlus)  // 添加 Element Plus 插件// 挂载到 #app 元素
app.mount('#app')

7、安装 Axios

1、下载 Axios

npm i axios

2、请求函数：`utils/request.ts`

import axios from 'axios';
import { ElMessage } from 'element-plus'; // 引入 Element Plus 消息组件
import type { InternalAxiosRequestConfig, AxiosResponse } from 'axios'; // 仅导入类型// 创建 axios 实例
const instance = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL, // 使用 Vite 的环境变量timeout: 5000,
});// 请求拦截器
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {// 在这里可以添加 Authorization 或其他请求头// config.headers['Authorization'] = localStorage.getItem('token');return config;},(error: any) => {ElMessage.error(`请求错误: ${error.message}`); // 使用 Element Plus 消息提示return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {const data = response.data;if (data && !data.Status) {ElMessage.error(`错误: ${data.Message || '未知错误'}`); // 使用 Element Plus 消息提示return data; // 如果需要自定义处理逻辑，可以调整} else {return data; // 返回整个响应数据}},(error: any) => {if (error.response) {// 处理服务器返回的错误响应ElMessage.error(`错误码 ${error.response.status}: ${error.response.statusText}`);} else {// 处理网络问题ElMessage.error('服务器无响应');}return Promise.reject(error);}
);export default instance;

3、api.ts

import request from '../utils/request';// 登录接口
interface LoginParams {username: string;password: string;
}export function login(params: LoginParams) {return request({url: '/login', // 替换为实际登录接口的 URLmethod: 'get', // 或者 'post'，根据实际需求调整params, // 将参数传递给请求});
}// 获取食谱接口
interface GetCateringScreenCookBookParams {userId: string;
}export function GetCateringScreen_CookBook(params: GetCateringScreenCookBookParams) {return request({url: '/getCookBook', // 替换为实际接口的 URLmethod: 'get', // 或者 'post'，根据实际需求调整params, // 将参数传递给请求});
}

8、集成 CSS 预编译器

1、下载sass

npm install -D sass

2、使用

<template><div class="example">Hello, world!</div>
</template><script setup lang="ts">// 这里是你的 TypeScript 代码
</script><style lang="scss">
.example {color: red;.nested {font-size: 20px;}
}
</style>