vite+vue3+ts从0到1搭建企业级项目(3)

简介: vite+vue3+ts从0到1搭建企业级项目

vite+vue3+ts从0到1搭建企业级项目(2)https://developer.aliyun.com/article/1540138

5. 集成 pinia

Pinia 是一个状态管理工具,和 Vuex 一样为 Vue 项目提供共享状态管理工具。并且支持vue2和vue3,主要是为vue3提供状态管理,支持typescript。Pinia可以创建多个全局仓库,不用像 Vuex 一个仓库嵌套模块,结构复杂。管理数据简单,提供数据和修改数据的逻辑即可,不像Vuex需要记忆太多的API。

  • 安装
yarn add pinia --save
  • src目录下创建store目录并在其下面创建index.ts
import { createPinia } from 'pinia'
 const store = createPinia()
 export default store
  • mian.ts引入
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from '@/router'
import store from './store'
const app=createApp(App)
app.use(router)
app.use(store)
app.mount('#app');
  • src/store目录下创建一个user.ts文件
import { defineStore } from 'pinia'
// 定义状态的接口
interface State {
    count: number; // 计数值
    name: string; // 用户名
}
// 使用 defineStore 创建一个 store
export const useStore = defineStore('main', {
    // 定义状态
    state: (): State => ({
        count: 0, // 初始计数值为 0
        name: 'John Doe', // 初始用户名为 'John Doe'
    }),
    // 定义 getters
    getters: {
        // 定义一个 getter,返回 count 的两倍
        doubleCount(): number {
            return this.count * 2
        },
    },
    // 定义 actions
    actions: {
        // 定义一个 action,将 count 值加 1
        increment() {
            this.count++
        },
    },
})
  • 在vue中使用
<template>
    <div>
        <!-- 显示 count 值 -->
        <p>Count: {{ store.count }}</p>
        <!-- 显示 name 值 -->
        <p>name: {{ store.name }}</p>
        <!-- 显示 count 值的两倍 -->
        <p>Double Count: {{ store.doubleCount }}</p>
        <!-- 点击按钮时,调用 increment action,将 count 值加 1 -->
        <button @click="store.increment">Increment</button>
    </div>
</template>
  
<script lang="ts" setup>
import { useStore } from '@/store/user.ts'
// 使用 store
const store = useStore()
</script>

6. 集成 VueUse

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说,这就是一个工具函数包,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。官网地址

  • 安装
yarn add @vueuse/core
  • 简易上手
<template>
    <div>
        <p>
            <!-- 撤销按钮,点击后调用undo方法 -->
            <button @click="undo"> 撤销 </button>
            <!-- 重做按钮,点击后调用redo方法 -->
            <button @click="redo"> 重做 </button>
        </p>
        <!-- 文本输入区域,双向绑定到text变量 -->
        <textarea v-model="text" />
        <!-- 列表开始,遍历history数组,显示每一个entry -->
        <ul>
            <li v-for="entry in history" :key="entry.timestamp">
                <!-- 显示history中每一项的内容 -->
                {{ entry }}
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
// 导入vue的ref方法
import { ref } from 'vue'
// 导入vueuse库的useRefHistory方法
import { useRefHistory } from '@vueuse/core'
// 定义一个响应式引用变量text,初始值为空字符串''
const text = ref('')
// 使用useRefHistory方法创建历史记录,提供undo和redo方法
const { history, undo, redo } = useRefHistory(text)
</script>
<style scoped>
// 定义按钮的样式
button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;
}
</style>
  • 这里使用了vueuseuseRefHistory方法,跟踪ref的更改历史,useRefHistory跟踪对 ref 所做的每一个改变,并将其存储在一个数组中。这样我们能够轻松为应用程序提供撤销重做功能。还有更多实用的功能哦。

7. 集成 less

  • 安装
yarn add less

8. 集成 axios

  • 安装
yarn add axios
  • src目录下创建utils文件夹,并新建request.ts
import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
// 创建axios实例
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API, // api的base_url
    timeout: 5000 // 请求超时时间
})
// 定义接口
export interface ResponseData<T = any> {
    code: number,
    data: T,
    message: string
}
// request拦截器
service.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
        // 在这里可以做些什么,例如添加token到headers
        return config
    },
    (error: any) => {
        // 请求错误时做些事情
        console.log(error) // for debug
        return Promise.reject(error)
    }
)
// respone拦截器
service.interceptors.response.use(
    (response: AxiosResponse) => {
        /**
         * 在这里可以对响应数据做些什么
         * 如果你想获取http信息,如headers或status
         * 请返回response => response
        */
        const res = response.data;
        return res;
    },
    (error: any) => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default {
    // get方法
    get<T = any>(url: string, params: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'get',
            params: params
        })
    },
    // post方法
    post<T = any>(url: string, data: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'post',
            data: data
        })
    },
    // put方法
    put<T = any>(url: string, data: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'put',
            data: data
        })
    },
    // delete方法
    delete<T = any>(url: string, params: object = {}): Promise<T> {
        return service({
            url: url,
            method: 'delete',
            params: params
        })
    }
}
  • src目录下新建api文件夹,封装项目每个模块的接口
    在这里给出一个基础示例,以供参考:
//pet.ts
import request from "@/utils/request";
export function getPet(petId: string) {
    return request.get(`/pet/${petId}`);
}
  • 在.vue文件中使用:
<script lang="ts" setup>
import { getPet } from '@/api/pet'
getPet('1').then(res => {//这里传的值需要和接口定义的类型一致
    console.log(res);
})
</script>
  • 运行项目,调用接口数据成功:

vite+vue3+ts从0到1搭建企业级项目(4)https://developer.aliyun.com/article/1540141

目录
相关文章
|
8天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
13天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
8 0
|
13天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
14 0
|
1天前
|
JavaScript
vue知识点
vue知识点
12 6
|
4天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
11天前
|
JavaScript
|
13天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
26 6
|
10天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2