Use vue3 to develop multi-terminal project practice in uniapp project

In this project, vue3 is used to develop multi-terminal project practice. hbuilderx has built-in vue3 module, and vite4.x is used to build. The speed of compiling and building projects is faster than that of rockets, which is super cool! ! ! !
insert image description here

1. Use version instructions

HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31

2. Create a project

Create a project through the hbuilderx visual editor

Click the editor's file > new > project (shortcut key Ctrl+N)

insert image description here
Select the uni-app project, enter the project name/path, select the project template, check the vue3 version, and click Create to create it successfully

insert image description here

3. Run the project

Click Run in Editor > Run to Browser > Select Browser
insert image description here

Of course, it can also run on mobile phones or emulators, and run on applet tools.

App.vue is coded using setup syntactic sugar.

<script setup>
    import {
    
     onLaunch, onShow, onHide } from '@dcloudio/uni-app'
    onLaunch(() => {
    
    
        console.log('App Launch!')
    })
    onShow(() => {
    
    
        console.log('App Show!')
    })
    onHide(() => {
    
    
        console.log('App Hide!')
    })
</script>

uniapp has built-in pinia state management.

import App from './App'

import uView from '@/uview-plus'

import {
    
     createSSRApp } from 'vue'
import {
    
     createPinia } from 'pinia'

export function createApp() {
    
    
    const app = createSSRApp(App)
    const pinia = createPinia()
    app.use(pinia)
    app.use(uView)
    return {
    
    
        app,
        pinia
    }
}

4. uniapp+pinia local cache plug-in PiniaPluginUnistorage

pinia-plugin-unistorage implements multi-terminal simpler global local data cache based on uniapp pinia

insert image description here

This plugin is the uniapp version of pinia-plugin-persistedstate.

npm install plugin

npm i pinia-plugin-unistorage -D

Introduced in main.ts

import {
    
     createSSRApp } from 'vue'
import * as Pinia from 'pinia'
import {
    
     createUnistorage } from 'pinia-plugin-unistorage'

export function createApp() {
    
    
    const app = createSSRApp(App)

    const store = Pinia.createPinia()

    // 关键代码
    store.use(createUnistorage())

    app.use(store)

    return {
    
    
        app,
        Pinia // 此处必须将 Pinia 返回
    }
}

use components

import {
    
     defineStore } from 'pinia'

export const useStore = defineStore('main', {
    
    
    state() {
    
    
        return {
    
    
            someState: 'hello pinia'
        }
    },
    unistorage: true // 开启后对 state 的数据读写都将持久化
})

Support vue3 setup syntax

import {
    
     defineStore } from 'pinia'

export const useStore = defineStore(
    'main',
    () => {
    
    
        const someState = ref('hello pinia')
        return {
    
     someState }
    },
    {
    
    
        unistorage: true // 开启后对 state 的数据读写都将持久化
    }
)

Plugin address
https://ext.dcloud.net.cn/plugin?id=8081
Warehouse address
https://github.com/dishait/pinia-plugin-unistorage

5. uni-app + vue3 + vite + ts project structure

insert image description here

index.html Home page entry file.
package.json project configuration file.
tsconfig.json typescript configuration file.
vite.config.ts Configuration file for vite.

src stores development resource files, and the basic things to do are all in this directory, which contains several directory files:

pages Store all page files, and the page components we create are placed in this folder.
static Folder for storing static resources.
App.vue page entry file, all pages are switched under App.vue.
env.d.ts Type declaration file for third-party modules.
main.ts project entry file, because the ts syntax is used, the suffix is .ts
mainfest.json Application configuration file, used to specify the application name, icon, permissions, etc.
pages.json Global configuration file, you can configure the page file path, window style, native navigation bar, bottom tab bar, etc.
uni.scss is the style package of uni-app, and the styles in the style package can be quickly referenced in other files.