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 的作用

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 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', // 替换为实际登录接口的 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、使用

<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>

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