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.tsimport { 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 = [  {    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.tsdeclare module '*.vue' {    import { DefineComponent } from 'vue'    const component: DefineComponent<{}, {}, any>    export default component}  

这样就不会报错了原因如下：

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

1. 告诉 TypeScript 识别 .vue文件：通过这个声明文件，TypeScript 会知道 .vue文件是一个 Vue 组件，并且可以正确地推断出这些组件的类型。
2. 避免类型错误：如果没有这个声明，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 Plusapp.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', // 替换为实际登录接口的 URL    method: 'get', // 或者 'post'，根据实际需求调整    params, // 将参数传递给请求  });}// 获取食谱接口interface GetCateringScreenCookBookParams {  userId: string;}export function GetCateringScreen_CookBook(params: GetCateringScreenCookBookParams) {  return request({    url: '/getCookBook', // 替换为实际接口的 URL    method: 'get', // 或者 'post'，根据实际需求调整    params, // 将参数传递给请求  });}

8、集成 CSS 预编译器

1、下载sass

npm install -D sass

2、使用

Sass 使用 scss语法（后缀 .scss），你也可以使用 sass（后缀 .sass）来编写不使用大括号和分号的语法。