如何创建一个vue3+TS+Element+Pinia的项目（保姆级别教程）

已于 2023-09-05 17:12:19 修改
阅读量1k 收藏 14
点赞数 5
分类专栏： vue3 vuejs 文章标签： rust 开发语言 后端
于 2023-08-28 17:31:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daizi0905/article/details/132532498
版权

一、使用vite创建项目

npm create vite@latest

当出现下面这一段话的时候，是在提示请输入你的项目名称（我这里用的是myProject），然后按2下回车就可以了。
输入项目名称
这里是选择搭建的项目框架，我们选择vue，然后按回车
选择项目框架
这里已经是选择了TypeScript了，我们直接按回车就可以
在这里插入图片描述
当出现这三行消息的时候，就说明我们已经安装好了，然后依次执行这三行消息就可以了!
创建成功

cd myProject
npm install
npm run dev

执行成功后就会出现以下消息，就说明已经运行成功了
在这里插入图片描述
我们直接复制Local后面的去浏览器打开就可以看到运行的结果了
在这里插入图片描述

二、安装css预处理器（sass)

scss是css的一种预处理器，可以大大提高css的维护性和可读性。它是动态样式表语言，可以赋予css动态语言的特性，例如变量，嵌套，继承，Mixin等，可以更加方便的对样式进行模块化开发。

npm install -D sass

使用测试，我们去项目的app.vue文件中使用一下：
这里是原本的代码
原本的css代码
改完后

<style lang="scss" scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
  &:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  &.vue {
    &:hover {
      filter: drop-shadow(0 0 2em #42b883aa);
    }
  }
}
</style>

改完后，再打开页面没看到有变化就说明sass安装成功了

三、初始化样式 normalize.css

npm i normalize.css

在main.ts中使用

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

import router from './router'; // 导入 router
import 'normalize.css'; // 引入 normalize.css

const app = createApp(App);

app.use(router); // 使用 router

app.mount('#app');

四、配置 src 路径别名

1.vite.config.ts

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  return {
    plugins: [
      vue(),
    ],
    
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
      },
    },
  }
})

2.tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
	 // 配置@路径别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
	// ...其他配置

    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
}

五、安装Router

1.npm安装

npm i vue-router@4

2.创建router文件

在src下创建一个 router 文件夹，再创建一个 index.ts 文件

// router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    name: 'Main',
    path: '/',
    meta: {
      title: 'Main',
    },
    component: () => import('@/views/Main/Main.vue'),
  },
  // 页面不存在时的路由
  {
    name: '404',
    path: '/:pathMatch(.*)*',
    meta: {
      title: '404',
    },
    component: () => import('@/views/Error/404.vue'),
  },
];

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

export default router;

3.在main.ts中使用router

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

import router from './router'; // 导入 router
import 'normalize.css'; // 引入 normalize.css

const app = createApp(App);

app.use(router); // 使用 router

app.mount('#app');

六、安装 Element Plus

安装

npm install element-plus --save

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import router from './router';
import 'normalize.css';
import ElementPlus from 'element-plus'; // 引入 ElementPlus
import 'element-plus/dist/index.css'; // 引入 ElementPlus 的 css 文件

const app = createApp(App);

app.use(router);
app.use(ElementPlus); // 使用 ElementPlus

app.mount('#app');

然后我们找一个页面使用一下，看看是否安装配置好了

<template>
  <div class="view">Main</div>
  <div>
    <!-- 使用 ElButton -->
    <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>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'; // 引入组件
</script>

<style lang="scss" scoped>
/* by wdTomato */
</style>

效果如下
在这里插入图片描述

七、配置自动化导入

配置自动化导入可以让我们提高我们开发的效率，可以避免我们需要频繁引入经常使用的api以及ui组件，例如vue中的ref，reactive等和element的组件。
但需要注意的是，自定义的方法也配置自动化导入的话，后期在维护的时候可能会不好追溯源。

npm install -D unplugin-vue-components unplugin-auto-import

import { defineConfig,} from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'

// 引入自动导入 api
import AutoImport from 'unplugin-auto-import/vite'
// 引入配置需要自动导入的组件
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  return {
    plugins: [
      vue(),
      AutoImport({
        // 配置需要自动导入的模块
        imports: ['vue', 'vue-router'],
        resolvers: [ElementPlusResolver()],
        dts: 'src/types/auto-import.d.ts',
      }),
      // 配置需要自动导入的组件
      Components({
        // 导入存放的位置
        dts: 'src/types/components.d.ts',
        resolvers: [ElementPlusResolver()],
      }),
    ],

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

配置好后我们就可以直接在.vue文件中使用vue的api，跟element组件了，不要再手动引入
在这里插入图片描述

八、使用仓库管理（Pinia）

Pinia是vue新的存储库，它可以让我们在跨组件通信的时候更加的方便快捷。由于Pinia是基于Vue3的Composition API 构建的，相对于Vuex用Option API更加的轻量级，易上手。可以让我们更轻松的管理存储数据。

1.安装

npm install pinia
# 或者使用 yarn
yarn add pinia

2.使用

在src目录下创建store文件夹，再创建一个index.ts文件

import type { App } from 'vue';
import { createPinia } from 'pinia';

const store = createPinia();

// 全局注册 store
export function setupStore(app: App<Element>) {
  app.use(store);
}

export default store;

在main中引入useStore 方法使用

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

import router from './router';  
import 'normalize.css'; 
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import { useStore } from './store'; // 引入 store

const app = createApp(App);

app.use(router);
app.use(ElementPlus);
app.use(useStore); // 使用 store

app.mount('#app');

3.使用例子

在store文件夹下创建一个modules的文件夹，再创建一个counter.ts的文件

// store/modules/counter.ts
import { defineStore } from 'pinia'; // 引入 defineStore

// 创建一个 counter store
export const useCounterStore = defineStore('counter', () => {
  // 创建一个 count 变量
  const count = ref(0);

  // 创建一个 increment 方法
  const increment = () => count.value++;

  // 返回 count 和 increment
  return {
    count,
    increment,
  };
});

在页面中使用

<template>
  <div class="view">
    <h1>Main + {{ counterStore.count }}</h1>
    <el-button type="primary" @click="increment">+ 1</el-button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/store/modules/counter'; // 引入store
const counterStore = useCounterStore(); // 使用store
// 使用store中的方法
const increment = () => {
  counterStore.increment();
};
</script>

<style lang="scss" scoped>
/* by wdTomato */
.view {
  margin: 200px auto;
  text-align: center;
}
</style>

运行效果
在这里插入图片描述

4.Pinia数据持久化

1).安装
npm i pinia-plugin-persistedstate
2).配置
// store/index.ts
import type { App } from 'vue'; 
import { createPinia } from 'pinia'; 
import piniaPersist from 'pinia-plugin-persistedstate'; // 引入持久化插件

const store = createPinia(); 
store.use(piniaPersist); // 使用 piniaPersist

export function useStore(app: App<Element>) {
  app.use(store);
}
export default store;
3).使用
// 在需要持久化的仓库启用
import { defineStore } from 'pinia';
export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0);
    const increment = () => count.value++;
    return {
      count,
      increment,
    };
  },
  { persist: true } // 启用持久化
);
4).效果

在这里插入图片描述

九、配置 env 环境

1.创建文件

在项目的根目录创建 .env.development 、.env.production这两个文件

  • 开发环境
# 开发环境

# 应用标题
VITE_TITLE = 'My-Admin-Dev'
# 端口号
VITE_PORT = 4090
#应用api前缀
VITE_BASE_API = '/dev-api'
# 代理指向地址
VITE_TARGET_URL = 你的接口地址
  • 生产环境
## 生产环境

# 应用标题
VITE_TITLE = 'My-Admin'
# 端口号
VITE_PORT = 4090
#应用api前缀
VITE_BASE_API = '/prod-api'
# 代理指向地址
VITE_APP_TARGET_URL = 你的接口地址

十、Axios

1.安装

npm i axios

2.处理请求，响应拦截

  • 在src下创建 service/request/index.ts文件
import axios from 'axios'
import type { InternalAxiosRequestConfig, AxiosResponse } from 'axios'
import { openLoading, closeLoading } from '@/hooks/useLoading.ts' // 引入开启、关闭 loading

// 创建 axios 示例
const request = axios.create({
  baseURL: import.meta.env.VITE_BASE_API, // 配置基础请求地址（配置方法在前面的 env 环境）
  timeout: 10000, // 请求超时时间
  headers: { 'Content-Type': 'application/json;charset=utf-8' }, // 请求头
})

let loading = false

// 请求拦截
request.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // config 可以拿到我们发送的请求内容，在这里可以配置请求权限，是否有token，根据自己的业务来写逻辑，也可以在这里根据需求修改请求头，请求类型请求时间。。。。
    // 判断是否需要 Loading
    if (!config.hideLoading) {
      openLoading() // 打开 Loading
      loading = true
    }
    console.log('config', config)
    return config // 这里必须要 return出去
  },
  (err: any) => {
    // 请求出错，关闭 Loading，用 Promise 返回错误
    console.log('request err', err)
    if (loading) closeLoading()
    ElMessage.error({
      message: err.msg || '接口请求异常',
    })
    return Promise.reject(err)
  }
)

// 响应拦截
request.interceptors.response.use(
  (response: AxiosResponse) => {
    // 请求内容响应回来，可以在这里做接口判断，可以通过后端返回请求状态码判断，根据后端接口来
    const { data } = response
    // 我这里成功状态码是 200
    if (response.status && response.data.code === 200) {
      if (loading) closeLoading()
      return data
    }
    // 如果不是 200 则返回错误
    if (loading) closeLoading()
    ElMessage.error({
      message: err.msg || '接口返回异常',
    })
    return Promise.reject(data)
  },
  (err: any) => {
    // 响应出错，关闭 Loading，用 Promise 返回错误
    if (loading) closeLoading()
    console.log(err)
    ElMessage.error({
      message: err.msg || '接口返回异常',
    })
    return Promise.reject(err)
  }
)

export default request
  • 创建src/hooks/useLoading.ts，loading hook
// useLoading.ts
import { ElLoading } from 'element-plus'

let loading: { close: () => void }
function openLoading() {
  loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
}
function closeLoading() {
  loading.close()
}
export { openLoading, closeLoading }

如果ElMessage或者ElLoading 报错，可能是先前配置自动导入没配置好，需要自己在文件手动导入

import { ElMessage, ElLoading } from 'element-plus'

3.前端配置反向代理，解决跨域

在这里插入图片描述

import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// 引入自动导入 api
import AutoImport from 'unplugin-auto-import/vite'
// 引入配置需要自动导入的组件
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue(),
      AutoImport({
        // 配置需要自动导入的模块
        imports: ['vue', 'vue-router'],
        resolvers: [ElementPlusResolver()],
        dts: 'src/types/auto-import.d.ts',
      }),
      // 配置需要自动导入的组件
      Components({
        // 导入存放的位置
        dts: 'src/types/components.d.ts',
        resolvers: [ElementPlusResolver()],
      }),
    ],

    // 配置代理
    server: {
      port: Number(env.VITE_PORT), // 启动端口号（配置在.env)
      open: true, // 是否启动就打开浏览器
      // 反向代理
      proxy: {
        [env.VITE_BASE_API]: {
          target: env.VITE_TARGET_URL,
          changeOrigin: true,
          rewrite: (path) =>
            path.replace(
              new RegExp(`^${env.VITE_BASE_API}`),
              env.VITE_TARGET_URL
            ), // 路径重写
        },
      },
    },

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

4.发送请求

按照我自己的习惯，我会在src创建一个api文件夹存放请求，方便管理
在这里插入图片描述
举个例子，在api文件夹下创建一个文件index.ts

import { AxiosPromise } from 'axios'
import request from '../request/index.ts'

// 查询参数接口
interface IQuery {
  page: number // 请求页码
  pageSize: number // 请求多少条数据
}

// 响应接口
interface ITableList {
  code: number // 响应状态码
  data: any[] // 响应数据
  msg: string // 响应消息
}

// 请求例子
export function getTableApi(queryParams: IQuery): AxiosPromise<ITableList> {
  return request({
    url: '/api/user/getAll', // 接口路径
    method: 'get', // 请求方法 get，post，put。。。
    params: queryParams, // 请求参数
    hideLoading: true, // 是否隐藏 loading，默认为不隐藏
  })
}

在组件（.vue 文件）中使用

<script setup lang="ts">
import { getTableApi } from '@/service/api/index.ts' // 引入接口方法

const getData = async () => {
  try {
    const res = await getTableApi({ page: 1, pageSize: 10 })
    console.log(res)
  } catch (e) {
    // TODO handle the exception
    console.log(e)
  }
}
getData()
</script>

在这里插入图片描述

结语

感谢阅读，有啥问题或者建议可以在评论中给我指出来！

daizi0905
关注
  • 5
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+ts+less+vite+pinia+axios基础封装项目模版
03-26
Vue 3 Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及Composition API等。使用Vue 3，开发者可以更加高效地构建用户界面，并享受更好的开发体验。 TypeScript TypeScript是JavaScript的一个超集，添加了静态类型、接口和类等特性。在Vue项目中引入TypeScript可以提高代码的可读性和可维护性，减少运行时错误，并提升团队协作的效率。 Less Less是一种CSS预处理器，它扩展了CSS的功能，允许使用变量、嵌套规则、函数等高级功能。使用Less，开发者可以编写更加模块化、可维护的CSS代码，并轻松地生成复杂的样式。 Vite Vite是一个现代化的前端构建工具，特别适用于Vue项目。它基于原生ESM提供极速的冷启动，并且不需要打包，提供快速的HMR开发体验。Vite通过原生ESM提供丰富的特性，如快速的热重载、按需编译和优化的构建输出。 Pinia Pinia是Vue.js的状态管理库，是Vuex的轻量级替代方案。它提供了直观和简洁的API，使得状态管理
从零开始搭建vue3 + ts + pinia + vite +element-plus项目
zhoushuizhang的博客
07-22 903
从零开始搭建vue3 + ts + pinia + vite +element-plus项目
Vite4.3+Typescript+Vue3+Pinia 最新搭建企业级前端项目
最新发布
油墨香^-^的博客
05-27 85
注意：按需引入时element-plus不需要在main.ts中引入，插件会自动挂载处理，可以在全局直接使用。源码地址：https://github.com/cwjbjy/vite-vue-ts-seed。rules更多配置：https://eslint.org/docs/latest/rules/vite：使用 new URL(url, import.meta.url).href 处理。node版本不足16的，使用 yarn test 启动命令，读取.env 与 .env.test的内容。
vite搭建后台管理系统（vue@3 + ts + vite + pnpm + element-plus ）
weixin_43937729的博客
07-04 435
vue3 + ts + vite + pnpm + element-plus搭建后台项目
vue3+vite+Ts+pinia搭建一个项目（详细教程）
weixin_53504747的博客
07-21 1201
Vue 3 是一个功能强大、性能出色、易于学习和使用的前端框架。通过提供更高的性能、更小的体积、Composition API 和更好的 TypeScript 支持，Vue 3 提供了更好的开发体验和构建用户界面的能力。它是 Vue.js 框架的重要进步，为开发者带来了更多可能性和创造力
vue3+vite+ts+pinia+element-puls+Ant Design Vue 手把手教你创建一个vue3项目
qq_45585640的博客
08-29 311
函数将会返回 store 模块的实例，然后我们就可以使用其中的状态和操作了。注意，这里的状态和操作是响应式的，所以在模块中的任何更改都将会立即反映到组件的模板中。打开 vite.config.ts 文件。然后控制台出现后面这三条命令。
vue3组合式编程+ts+vueRouter+pinia+ElemetPlus前端框架搭建
weixin_52247433的博客
01-12 1790
下载axios: npm i axios新建两个配置文件 执行 npm run dev 则读取此文件#.env.development文件# 此文件为开发阶段使用的配置文件 执行 npm run dev 则读取此文件# 开发环境配置: 必须以 `VITE_` 开头# 例如:VITE_ETOAK=/小猪佩奇# 获取方式 import.meta.env.VITE_ETOAK# 那么 这里通过 import.meta.env.VITE_APP_BASE_API 可以获取后面的基本地址。
【Vue3+Vite+Ts+element-plus】使用tsx实现左侧栏菜单无限层级封装
枫ゞ的博客
03-14 881
在我们日常开发中 有时候会经常遇到如下图这种多层级的菜单栏，如果单单只用原本的vue开发起来会比较麻烦，而如果使用tsx则可以在一个.vue文件中实现 任意层级的菜单栏 ，这就是tsx的灵活性
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
vue3_elementPlus_ts
02-25
vue3_template 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
uniapp + vue3 +vite + ts + pinia 框架模板
01-31
这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在框架中的作用。 **uni-app** 是一个跨平台的开发框架，它允许开发者使用一套代码来...
Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记
weixin_34056162的博客
03-31 3010
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目，并在此过程中踩过的坑 。 TypeScript 具有类型系统，且是 JavaScript 的超集，TypeScript 在 2018年 势头迅猛，可谓遍地开花。 Vue3.0 将使用 TS 重写，重写后的 Vue3.0 将更好的支持 TS。2019 年 TypeScript 将会更加普及，能够熟练掌握 TS，并使用 ...
搭建vue3项目+按需引入element-ui框架组件
????鱼干～
04-10 8117
搭建vue3项目+按需引入element-ui框架组件
vue3+elementPlus项目搭建
程序猿的傻白甜
06-26 3331
vue3+elementPlus项目创建
vue3 中应用 element plus,pinia 实现简易购物车
qq_35191010的博客
04-11 1092
vue3中应用 element plus 和 pinia 实现简易购物车
使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件
都随它大小便吧
11-14 2705
记录一下使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件。
vue3+vite+ts+pinia新建项目（略详细版）
chu_geng的博客
01-11 593
使用 vue3+vite+ts+pinia 从头搭建项目
怎么搭建一个vue3+ts+pinia+element-plus后台管理系统框架
04-04
要搭建一个vue3 ts pinia element-plus后台管理系统框架，可以按照以下步骤进行： 1. 安装Node.js和Vue CLI Vue CLI是用于创建和管理Vue项目的官方工具，需要先安装Node.js和Vue CLI。 2. 创建基于Vue3和TypeScript的项目 使用Vue CLI创建一个基于Vue3和TypeScript的项目，输入以下命令： ``` vue create my-project --preset=@vue/cli-plugin-typescript ``` 3. 安装Pinia Pinia是一个Vue 3状态管理库，可以用于管理应用程序的状态。在项目中安装Pinia，输入以下命令： ``` npm install pinia ``` 4. 安装Element Plus Element Plus是一个基于Vue.js 3的UI库，可用于构建后台管理系统。在项目中安装Element Plus，输入以下命令： ``` npm install element-plus ``` 5. 创建页面和组件 根据项目需求，创建页面和组件。 6. 配置Pinia 在main.ts中引入Pinia，并在创建Vue实例时使用它。示例代码如下： ```typescript import { createApp } from 'vue' import App from './App.vue' import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.mount('#app') ``` 7. 配置Element Plus 在main.ts中引入Element Plus，并在创建Vue实例时使用它。示例代码如下： ```typescript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 8. 编写页面和组件 使用Vue3和TypeScript编写页面和组件。 9. 运行项目 运行项目，输入以下命令： ``` npm run serve ``` 以上就是搭建一个vue3 ts pinia element-plus后台管理系统框架的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值