VUE3+TS+ELEMENT+AXIOS+PINIA搭建指南

2025年6月20日 123点热度 0人点赞 0条评论

1、创建项目

cd D:\study
pnpm create vite study_demo_1 --template vue-ts
cd study_demo_1
pnpm install
pnpm run dev

2、安装依赖

pnpm add element-plus
pnpm add axios
pnpm add pinia
pnpm add vue-router
pnpm add tailwindcss @tailwindcss/vite

pnpm add -D @types/node

3、配置路径别名

在使用 Vite 和 TypeScript 开发项目时，配置路径别名（如 @）是一种常见的做法。这不仅可以简化模块导入路径，提高代码的可读性和可维护性，还可以避免因为目录结构调整导致的路径问题。下面我将从多个角度详细解释为什么在 Vite 和 TypeScript 中配置路径别名是必要的。

3.1、vite.config.ts中加入下面代码

resolve: {
    alias: {
    '@': path.resolve(__dirname, 'src'),
    },
},

3.2、tsconfig.app.json中compilerOptions下加入

"baseUrl": "./",
 "paths": {
    "@/*": ["src/*"]
}

4、配置tailwindcss

这里是V4版本的配置，相比V3版本已经简化

4.1、修改vite.config.ts添加配置

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

4.2、在src目录中添加style目录并创建tailwind.css

@import "tailwindcss";

后续需要在main.ts中引用。

5、配置vue router

src目录下新建router目录，目录中新建index.ts文件

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
  {
    path: '/',
    component: () => import('@/views/home.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

src目录下新建views目录，目录中新建home.ts文件

<template>
  <view class="flex ml-4 mt-4 h-screen">
    <view>首页</view>
  </view>
</template>

6、整合配置element plus、vue route、pinia、tailwind.css

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router/index.ts'
import { createPinia } from 'pinia'
import '@/style/tailwind.css'

const app = createApp(App)
const pinia = createPinia();
app.use(ElementPlus)
app.use(router)
app.use(pinia)
app.mount('#app')

7、测试Element-Plus

7.1 修改路由（src/router/index.ts）

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/home.vue'),
  },
  {
    path: '/element',
    name: 'Element',
    component: () => import('@/views/element.vue'),
  },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

7.1 添加页面（src/views/element.vue）

<template>
  <view class="flex ml-4 mt-6">
    <view class="flex">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </view>
  </view>
</template>

8、封装Axios和测试

8.1 添加axiosInstance.ts

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3004',
  timeout: 10000,
});

axiosInstance.interceptors.request.use(
  config => {
    config.headers.Authorization = `Bearer`;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axiosInstance.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response && error.response.status === 401) {
      console.error('Unauthorized, redirecting to login...');
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

8.2 添加dataService.ts

import axiosInstance from './axiosInstance';

export const getData = () => {
  return axiosInstance.get('/api/data');
};

8.3 添加页面（src/views/axios.vue）

<template>
  <view class="flex items-center justify-center h-screen">
    <view>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名字" width="180" />
        <el-table-column prop="imageUrl" label="图标" width="480" />
        <el-table-column prop="weburl" label="地址" width="280"/>
      </el-table>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getData } from "@/http/dataService.ts";

interface TableItem {
  tid: number;
  uuid: any;
  name: any;
  imageUrl: any;
  weburl: any;
}
const tableData = ref<TableItem[]>([]);

const fetchData = async () => {
  try {
    const response = await getData();
    const rtdata = response.data.data;
    for (let i = 0; i < rtdata.length; i++) {
      const item = rtdata[i];
      const { id, uuid, name, imageUrl, weburl } = item;
      let tid = 0;
      if (typeof id === "string") {
        tid = parseInt(id);
      } else {
        tid = id;
      }
      const data = { tid, uuid, name, imageUrl, weburl };
      tableData.value.push(data);
    }
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

9、测试Pinia

9.1、创建Store（src/stores/commonStore.ts）

import { defineStore } from "pinia";
import { ref } from "vue";

export const useCommonStore = defineStore("commonState", () => {
  const count = ref(0);

  const addCount = () => {
    return count.value++;
  };

  return {
    count,
    addCount,
  };
});

9.2、添加Pinia测试页面（src/views/pinia.vue）

<template>
  <view class="flex items-center justify-center h-screen">
    <view>
      <el-button type="primary" @click="addCount">加一</el-button>
      <span>数字为：{{commonStore.count}}</span>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useCommonStore } from "@/stores/commonStore.ts";
const commonStore = useCommonStore();

const addCount = () => {
    commonStore.addCount();
}
</script>