uniapp使用 uview-plus 和 Pinia（vue3项目）

第一部分：使用uview-plus

一、创建一个vue3的uniapp项目

选择默认模板  Vue版本选择3

 二、Hbuilder 插件市场引入

在uniapp插件市场搜索uview plus，选择插件后点击右边的“下载插件并导入HBuilderX”

选择刚创建的项目进行导入即可

三、项目中引入uview-plus

第一步：在项目根目录中的main.js中，引入并使用uview-plus

// main.js
import uviewPlus from '@/uni_modules/uview-plus'
 
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

第二步：在项目根目录的uni.scss中引入uview-plus的全局SCSS主题文件

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

第三步：在App.vue的style中引入uview-plus基础样式

注意：需要给style标签加入lang="scss"属性

<style lang="scss">
    /* 需要给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-plus/index.scss";
</style>

第五步：在使用的页面中使用uview-plus的组件，效果展示

以下是我使用的button组件

<!-- index.vue -->
<template>
  <view>
    <u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
  </view>
</template>

效果展示：

第二部分：使用Pinia

说明：在 HBuilder X 下不需要安装Pinia，可以直接使用

一、在项目根目录中的main.js中，引入并使用Pinia

备注：需return  Pinia

//main.js
import App from './App'
import * as Pinia from 'pinia';
 
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia());
  return {
    app,
    Pinia  //此处必须返回Pinia
  }
}
// #endif

二、文件中创建store文件夹，store中新建user.js文件，编写共享状态代码 

import { defineStore } from 'pinia'
//创建用户小仓库
const useUserStore = defineStore('User',{
  state:()=>{
    return {
      count:0
    }
  }
})
 
//暴露用户小仓库
export default useUserStore

三、在页面中调用共享数据，效果展示

//index.vue
<template>
  <view>
    <u-button type="primary" :plain="true" :hairline="true" text="细边" @click="add"></u-button>
  </view>
</template>
 
<script setup>
//引入用户相关的小仓库
import useUserStore from '@/store/user.js'
const useStore = useUserStore()
//定义button点击事件add
const add = ()=>{
 console.log( useStore.count++);
}
</script>

 效果展示：点击按钮，count+1

最后：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/970750