当前位置：首页 > news >正文

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

news 来源：原创 2024/9/18 5:15:50

创建一个基于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.tsimport { defineStore } from 'pinia';export const useStore = defineStore('main', {state: () => {return {// state};},actions: {// actions},getters: {// getters},});

5. 集成Element Plus

   // src/main.tsimport { 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_urltimeout: 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。开发人员可以在此基础上继续开发，构建完整的应用程序。