vite tailwindcss naive-ui 2vite tailwindcss naive-ui vite ta

Axios

Axios是基于Promise的HTTP库，可用于浏览器和Node.js环境。

$ npm i -D axios
$ npm view axios version
1.3.2

qs

qs是一个增强安全性的查询字符串解析和序列化字符串的库。

$ npm i -D qs
$ npm view qs version
6.11.0

Lodash-es

Lodash是一个一致性、模块化、高性能的JS实用工具库，默认采用CommonJS。

lodash通过降低array、number、object、string等的使用难度从而让JS变得更加简单。

lodash-es是lodash的ES Module版本。

$ npm i -D lodash-es
$ npm view lodash-es version
4.17.21

VueUse

vueuse.org/

Vue3支持组合式API(Composition API)，可使用来封装和复用有状态逻辑的函数。组合式API约定使用驼峰命名法，以use作为开头。

VueUse是为Vue2和3提供的一套Vue Composition API组合式API的工具集，目的是将原本不支持响应式的JS API转变为支持响应式。该工具函数库支持更好的逻辑分离，有助于快速实现常见功能。

$ npm i -D @vueuse/core
$ npm view @vueuse/core version
9.12.0

Pinia

Pinia是一个全新的Vue状态管理库，是Vuex的代替者。

优点

方便追踪与调试state
支持Composition API来定义store
支持HMR
支持Plugin扩展

安装

$ npm i -D pinia
$ npm view pinia version
2.0.30

创建仓库

$ vim src/store/index.ts

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

const store = createPinia()
export function setupStore(app:App<Element>) {
  app.use(store)
}
export {store}

总线注册

$ vim src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { setupStore } from '@/store'

async function bootstrap(){
  const app = createApp(App)

  setupStore(app)

  app.mount('#app', true)
}

void bootstrap()

pinia-plugin-persist

常规store存储的数据刷新时会被重置，某些特定场景需要实现对特定数据的状态进行保持，可使用pinia-plugin-persist插件。

$ npm i -D pinia-plugin-persist
$ npm view pinia-plugin-persist version

注册插件

$ vim src/store/index.ts

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

import piniaPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPersist)

export function setupStore(app:App<Element>) {
  app.use(store)
}
export {store}

为TS编译器配置

$ vim tsconfig.json

{
  "compilerOptions": {
    "types": [
      "pinia-plugin-persist"
    ]
  },
}