vue3+ts+vite+pinia+element-plus搭建一个项目

创建一个基于Vue 3、TypeScript、Vite、Pinia和Element Plus的项目是一个现代化的前端开发流程，这种配置通常用于构建轻量级、快速和模块化的单页应用程序（SPA）。下面是一个简单的介绍：

1. Vue 3

是Vue.js的最新主要版本，提供了Composition API、更好的TypeScript支持、自定义渲染器等功能。

2. TypeScript

是JavaScript的一个超集，添加了类型系统和基于类的面向对象编程。它能够提供更好的代码编辑支持和更早发现运行时错误，特别是在大型项目中。

3. Vite

是一个现代的前端构建工具，它以原生ESM（ECMAScript Modules）方式提供服务，具有快速的冷启动、即时热更新和高效的构建性能。

4. Pinia

是Vue.js的状态管理库，用于跨组件共享状态。与Vuex相比，Pinia提供更简洁的API，易于理解和使用。

5. Element Plus

是基于Vue 3的UI组件库，提供了丰富的组件，可以快速构建美观的界面。

搭建步骤

1. 初始化项目

使用Vite创建一个新的Vue 3项目，并安装依赖。

npm create vite@latest my-project -- --template vue-ts
cd my-project
npm install

2. 安装Pinia

用于状态管理。

npm install pinia

3. 安装Element Plus作为UI框架

 npm install element-plus --save

4. 配置Pinia状态管理

 // src/stores/index.ts
   import { defineStore } from 'pinia';

   export const useStore = defineStore('main', {
     state: () => {
       return {
         // state
       };
     },
     actions: {
       // actions
     },
     getters: {
       // getters
     },
   });

5. 集成Element Plus

   // src/main.ts
   import { createApp } from 'vue';
   import App from './App.vue';
   import ElementPlus from 'element-plus';
   import 'element-plus/dist/index.css';
   import { createPinia } from 'pinia';
   import { useStore } from './stores';

   const app = createApp(App);

   app.use(ElementPlus);
   app.use(createPinia());
   app.mount('#app');

6. 编写组件

7.多环境配置

在项目根目录下创建 .env 文件，例如 .env.development、.env.production，配置不同的环境变量。

使用 Vite 的环境变量功能，可以在代码中使用 import.meta.env.VITE_* 来获取环境变量。

在构建时，通过设置环境标志来选择对应的环境配置。

8. 运行项目

npm run dev

9.封装网络请求

   api/request.ts

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';

// 创建axios实例
const service: AxiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // API的base_url
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在这里可以设置loading状态
    // ...
    return config;
  },
  (error: any) => {
    // 请求错误处理
    // ...
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 响应状态码判断
    if (response.status === 200) {
      // 在这里可以关闭loading状态
      // ...
      return response.data;
    }
    // 如果返回的状态码不是200，说明接口出现异常
    // ...
    return Promise.reject(response);
  },
  (error: AxiosError) => {
    // 响应错误处理
    // ...
    return Promise.reject(error);
  }
);

export default service;

import service from '@/api/request.ts';

export default {
  data() {
    return {
      // ... 定义数据属性，比如loading状态和错误信息等
    };
  },
  methods: {
    async fetchData() {
      this.loading = true; // 开启loading状态
      try {
        const response = await service.get('/path/to/endpoint');
        // 处理响应数据
        // ...
      } catch (error) {
        // 处理错误
        // ...
      } finally {
        this.loading = false; // 关闭loading状态
      }
    }
  }
};

这样就搭建了一个基础的Vue 3项目，集成了TypeScript、Vite、Pinia和Element Plus。开发人员可以在此基础上继续开发，构建完整的应用程序。