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>
- 这里使用了
vueuse的useRefHistory方法,跟踪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
