DOCSEARCHbyAlgolia
Submit Docs

unisave Documentation

website·Indexed 29 days ago

https://unisave-docs.netlify.app

An open-source template based on Vue 3 and uni-app for creating type-safe, high-performance, and production-ready cross-platform applications. It features integration with Vite, pnpm, Pinia, UnoCSS, and uview-plus, providing a pre-configured environment for rapid development.

Tokens
5.1K
Snippets
28
Records
38
Agent score
74%

What's inside unisave

  1. Overview of the unisave template

    unisave is an open-source template built on Vue 3 and uni-app. It provides a scalable way to create type-safe, high-performance, production-ready cross-platform applications. It allows developers to start writing .vue files immediately without manual configuration, drawing inspiration from the vitesse template. Unlike standard uni-app workflows that rely on HBuilderX, unisave embraces the open ecosystem, specifically supporting VS Code and pnpm.

  2. Understand the role of App.vue in unisave

    App.vue serves as the main component and entry file for the uni-app application. All pages are switched under App.vue. It is not a page itself and cannot contain view elements (meaning the <template> tag cannot be used). Its primary purposes are: listening to application lifecycle events, configuring global styles, and managing global data storage (globalData). Application lifecycle events can only be monitored within App.vue.

  3. Create pages using file-based routing

    Unisave implements convention-based routing via @uni-helper/vite-plugin-uni-pages. Every .vue file created within the src/pages directory automatically represents a route. For example, a file at src/pages/unocss/index.vue is accessible via the path /pages/unocss/index.
    <!-- src/pages/unocss/index.vue -->
<template>
  <section>
    <p>Access this page via /pages/unocss/index</p>
  </section>
  <view border="1 solid" text="center" padding="10">
    Unocss
  </view>
</template>

  5. Create and use global components in unisave

    Unisave uses unplugin-vue-components to automatically register components globally. You do not need to explicitly import components; simply create a Vue component file in the src/components directory, and it will be available for use in any page or component.
    <!-- src/components/Logos.vue -->
<template>
  <view inline-flex cursor-default text-2xl font-300>
    <view flex flex-col>
      <image inline-block h-10 w-10 src="/static/logo.png" />
    </view>
    <view
        text="3xl gray4"
        m="x-4 y-auto"
        i-carbon-add transform transition-all-500 hover:rotate-135
    />
    <view flex flex-col>
      <span i-carbon-campsite h-10 w-10 />
    </view>
  </view>
</template>

<!-- src/pages/index/index.vue -->
<template>
  <view>
    <h1>Welcome to unisave</h1>
    <Logos /> <!-- Automatically registered -->
  </view>
</template>

  6. Implement icons using UnoCSS Icons and Iconify

    UnoCSS Icons allow on-demand loading of over 100,000 icons via the Iconify ecosystem. The syntax follows the pattern i-[library]-[icon-name]. Dark mode support is available using the dark: prefix.

    Note: unisave comes with the carbon icon library pre-installed.

    # Install additional icon sets (e.g., carbon)
npm install @iconify-json/carbon
    <!-- Usage: i-carbon-sun for light mode, i-carbon-moon for dark mode -->
<view class="i-carbon-sun dark:i-carbon-moon" />

  7. Implement request and response interceptors

    You can use instance.interceptors to modify outgoing requests (e.g., adding auth tokens) or handle incoming responses globally (e.g., error handling based on status codes and hiding loading indicators).
    // Request Interceptor: Add token and show loading
instance.interceptors.request.use((config) => {
  loading.show(config.loading)
  config.header.token = '**********'
  return config
})

// Response Interceptor: Handle business errors and hide loading
instance.interceptors.response.use((response: any) => {
  const { errno } = response
  if (errno) {
    showToast({ title: '服务器出错，请稍后再试。' })
    loading.hide(true)
    return Promise.reject(response)
  }
  loading.hide(response.config.loading)
  
  const { code, data, msg } = response.data
  if (code === 1) return data

  uni.showToast({ title: msg })
  handleError(response)
  return Promise.reject(response.data)
}, (error) => {
  loading.hide(error.config.loading)
  return Promise.reject(error)
})

  9. Use CSS Preprocessors and SFC styles

    The template comes with built-in SCSS support. Use lang="scss" in your style blocks. For other preprocessors, refer to the Vite CSS Pre-processors documentation. Single File Component (SFC) styles follow standard Vue CSS features.
    <style lang="scss">
/* Your SCSS here */
</style>

  10. Implement state management with Pinia and Persistence in Unisave

    Unisave uses Pinia for state management and pinia-plugin-persist-uni for data persistence within uni-app. State is managed using the Composition API approach.
    // src/stores/modules/count.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCountStore = defineStore('count', () => {
  const count = ref(0)

  function inc() {
    count.value += 1
  }
  function dec() {
    count.value -= 1
  }

  return {
    count,
    inc,
    dec,
  }
}, {
  persist: {
    enabled: true,
    detached: true, // Detach subscription from component
  },
})
    <script setup lang="ts">
  import { storeToRefs } from 'pinia'
  import { useCountStore } from '@/stores/modules/count'

  const { inc, dec } = useCountStore()
  const { count } = storeToRefs(useCountStore())
</script>

<template>
  <div my-4>
    <div mb1 text-gray:80>
      Data is stored and persisted via pinia.
    </div>
    <div flex="~ items-center">
      <u-button h="!6" w="!12" type="success" text="-" @click="dec" />
      {{ count }}
      <u-button h="!6" w="!12" type="success" text="+" @click="inc" />
    </div>
  </div>
</template>

  11. Coding standards and type definitions in unisave

    unisave follows specific coding and typing standards to maintain consistency and type safety:

    Coding Style

    • Uses Composition API with <script setup> SFC syntax.
    • ESLint is configured using @antfu/eslint-config (single quotes, no semicolons), supplemented by @unocss/eslint-config and @uni-helper/eslint-config for uni-app specific rules.

    Platform Type Definitions Type definitions are provided for the following platforms:

    • uni-app components (@uni-helper/uni-app-types)
    • WeChat Mini Programs (miniprogram-api-typings)
    • Alipay Mini Programs (@mini-types/alipay)
    • Douyin Mini Programs (@douyin-microapp/typings)
    • Kuaishou Mini Programs (ks-miniprogram-types/global)
    • Baidu Mini Programs (@types/baidu-app)

  12. Implement shared layouts for pages

    Layouts act as wrappers for common UI elements (like headers and footers) and are implemented using Vue slots via @uni-helper/vite-plugin-uni-layouts. The file src/layouts/default.vue serves as the default layout for all pages.
    <!-- src/layouts/default.vue -->
<template>
  <main class="px-10 py-20 text-center">
    <slot /> <!-- Page content is injected here -->
    <Footer />
    <div mx-auto mt-4 text-center text-sm opacity-50>
      [Default Layout]
    </div>
  </main>
</template>