Vite + Vue3 + TypeScript + Router + Pinia + Element Plus + Axios

墨客先生

于 2024-09-27 23:05:17 发布

阅读量579

点赞数 15

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_41367785/article/details/142603928

版权

Vite - 作为构建工具，首先使用Vite来创建项目并设置基本的开发环境。
Vue 3 - Vite项目创建后，基础框架是Vue 3，这是你的应用程序的核心。
TypeScript - 在初始化Vite项目时选择TypeScript模板，这样从一开始就使用TypeScript进行类型安全的开发。
Vue Router - 接下来配置路由系统，这通常是紧随框架之后需要考虑的部分，以便开始构建多页面的应用程序。
Pinia - 设置状态管理库Pinia，用于管理应用的状态和数据流。
Element Plus - 引入UI库Element Plus，为应用提供丰富的组件库以快速搭建用户界面。
Axios - 最后，集成Axios来处理HTTP请求，与后端API进行通信。

这些技术栈组合是现代Vue.js应用开发中非常流行的选择。下面我会简单介绍每个组件以及它们如何协同工作，来帮助你构建一个高效、可维护的前端应用程序。

Vue 3 - 是Vue.js框架的最新版本，它带来了许多性能改进和新特性，如Composition API，这使得代码组织更加灵活，特别是在大型项目中。
TypeScript - 是JavaScript的一个超集，添加了静态类型检查等特性。在Vue 3项目中使用TypeScript可以提高代码质量，减少运行时错误，并提供更好的开发体验（比如智能感知）。
Vue Router - 是Vue官方的路由管理器。它让你能够创建SPA（单页应用），并实现页面间的导航而无需重新加载整个页面。
Element Plus - 是基于Vue 3的一个UI库，提供了丰富的组件来快速搭建美观且功能强大的网页界面。它是Element UI针对Vue 3的升级版。
Axios - 是一个基于Promise的HTTP客户端，可用于浏览器和node.js中发送异步请求。它支持所有现代浏览器，可以用作替代XMLHttpRequest对象的一种方式。
Pinia - 是Vuex的新一代状态管理模式，专为Vue 3设计。与Vuex相比，Pinia具有更简洁的API，并且同样支持Typescript友好地处理复杂的状态逻辑。
Vite - 是一款由Vue作者尤雨溪开发的新一代前端构建工具。它的特点是启动速度极快，因为它采用了原生ES模块导入的方式进行服务端渲染。这对于开发阶段来说是一个巨大的效率提升。

下面我将指导大家按照顺序来安装和配置这些技术栈。我们将从创建一个Vite项目开始，逐步添加Vue 3、TypeScript、Vue Router、Pinia、Element Plus 和 Axios。

第一步：使用 Vite 创建 Vue 3 + TypeScript 项目

确保Node.js已安装：确保你的系统中已经安装了Node.js（建议版本为LTS）。
创建Vite项目：打开终端，运行以下命令来创建一个新的Vue 3 + TypeScript项目。

npm create vite@latest my-vue-app -- --template vue-ts

这里的my-vue-app是你项目的名称，你可以根据需要更改它。

3.进入项目目录并安装依赖：

cd my-vue-app
npm install

第二步：配置 Vue Router

安装Vue Router：

npm install vue-router@next

2. 配置路由：在src文件夹下创建一个router文件夹，并在其中创建一个index.ts文件。在这个文件中设置基本的路由配置。

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'; // 假设你有一个Home视图

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 更多路由...
];

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

export default router;

3.在主应用中使用路由：编辑src/main.ts，引入并使用路由。

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

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

第三步：配置 Pinia

安装Pinia：

npm install pinia

2.创建Pinia存储：在src文件夹下创建一个stores文件夹，并在其中创建一个counter.ts文件作为示例。

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

3.在主应用中使用Pinia：

编辑src/main.ts，引入并使用Pinia。

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';

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

第四步：安装 Element Plus

安装Element Plus及其依赖：

npm install element-plus

2.全局引入Element Plus（或者按需引入）：

编辑src/main.ts，全局引入Element Plus。

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

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

第五步：安装 Axios

安装Axios：

npm install axios

2.创建Axios实例（可选）：

你可以在src文件夹下创建一个api文件夹，并在其中创建一个index.ts文件来封装Axios实例。

// src/api/index.ts
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://your-api-endpoint.com', // 替换为你的API地址
  timeout: 5000,
});

export default instance;

现在，已经完成了所有主要技术栈的安装和配置。你可以根据需要继续开发你的应用程序。