uniapp项目中使用vue3开发多端项目实践

深藏阁楼爱情的钟 2023-10-12 19:16 0阅读 0赞

#### 目录 ####

*   *   *  1、使用版本说明
         *  2、创建项目
         *  3、运行项目
         *  4、uniapp+pinia本地缓存插件PiniaPluginUnistorage
         *  5、 uni-app + vue3 + vite + ts 项目结构

本项目中使用vue3开发多端项目实践，hbuilderx内置vue3模块，使用了vite4.x构建，编译构建项目的速度比火箭还快，超爽！！！！  
![在这里插入图片描述][6b7bf991dab84d2da9c8353b7b8850c4.png]

#### 1、使用版本说明 ####

HBuilderX: 3.8.4
    Vite: 4.2.1
    uView-Plus: 3.1.31

#### 2、创建项目 ####

通过hbuilderx可视化编辑器创建项目

点击编辑器的文件 > 新建 > 项目（快捷键Ctrl+N）

![在这里插入图片描述][ff149819907f4e8da72425caa9b293f4.png]  
选择uni-app项目，输入项目名/路径，选择项目模板，勾选vue3版本，点击创建，即可成功创建

![在这里插入图片描述][27548434ebda464a9a20b25bcdbb478e.png]

#### 3、运行项目 ####

点击编辑器的运行 > 运行到浏览器 > 选择浏览器  
![在这里插入图片描述][d23420c2c74640219349d3e2f59db49b.png]

当然也可以运行到手机或模拟器、运行到小程序工具。

App.vue使用setup语法糖编码。

uniapp内置了pinia状态管理。

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本地缓存插件PiniaPluginUnistorage ####

> pinia-plugin-unistorage 基于uniapp pinia实现多端的更简单的全局本地数据缓存

![在这里插入图片描述][8b419e55385844a7b0a8a098a86bc47a.png]

> 该插件是 pinia-plugin-persistedstate 的 uniapp 版本。

npm安装插件

npm i pinia-plugin-unistorage -D

在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 返回
        }
    }

使用组件

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

支持vue3 setup 语法

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

插件地址  
[https://ext.dcloud.net.cn/plugin?id=8081][https_ext.dcloud.net.cn_plugin_id_8081]  
仓库地址  
[https://github.com/dishait/pinia-plugin-unistorage][https_github.com_dishait_pinia-plugin-unistorage]

#### 5、 uni-app + vue3 + vite + ts 项目结构 ####

![在这里插入图片描述][ca401e43a60e49ca8044c9b270768cb1.png]

*  index.html 首页入口文件。
 *  package.json 项目配置文件。
 *  tsconfig.json typescript 配置文件。
 *  vite.config.ts vite 的配置文件。

src 存放开发资源文件，基本要做的事情都在这个目录内，里面又包含了几个目录文件：

*  pages 存放所有页面文件，我们创建的页面组件都放入该文件夹。
 *  static 存放静态资源的文件夹。
 *  App.vue 页面入口文件，所有页面都在 App.vue 下进行切换。
 *  env.d.ts 第三方模块的类型声明文件。
 *  main.ts 项目入口文件，因为使用 ts 语法，所以后缀是 .ts
 *  mainfest.json 应用配置文件，用于指定应用名称、图标、权限等。
 *  pages.json 全局配置文件，可以配置页面文件路径、窗口样式、原生的导航栏、底部tab栏等。
 *  uni.scss 是uni-app的样式包，在其他文件中可以快速引用样式包内的样式。

[6b7bf991dab84d2da9c8353b7b8850c4.png]: https://img-blog.csdnimg.cn/6b7bf991dab84d2da9c8353b7b8850c4.png
[ff149819907f4e8da72425caa9b293f4.png]: https://img-blog.csdnimg.cn/ff149819907f4e8da72425caa9b293f4.png
[27548434ebda464a9a20b25bcdbb478e.png]: https://img-blog.csdnimg.cn/27548434ebda464a9a20b25bcdbb478e.png
[d23420c2c74640219349d3e2f59db49b.png]: https://img-blog.csdnimg.cn/d23420c2c74640219349d3e2f59db49b.png
[8b419e55385844a7b0a8a098a86bc47a.png]: https://img-blog.csdnimg.cn/8b419e55385844a7b0a8a098a86bc47a.png
[https_ext.dcloud.net.cn_plugin_id_8081]: https://ext.dcloud.net.cn/plugin?id=8081
[https_github.com_dishait_pinia-plugin-unistorage]: https://github.com/dishait/pinia-plugin-unistorage
[ca401e43a60e49ca8044c9b270768cb1.png]: https://img-blog.csdnimg.cn/ca401e43a60e49ca8044c9b270768cb1.png