HBuilder创建uniapp项目（Vue3、Vant Weapp）

"usingComponents": {
          
   
	"van-button": "/wxcomponents/vant/button/index"
}

5.在App.vue文件中引入样式： @import "/wxcomponents/vant/common/index.wxss"; 5.在页面中使用组件button <van-button type="primary">按钮</van-button> 此时运行若未在页面上展示按钮,也并未报错的话，可以尝试： ①把node_modules删除，运行npm install，然后在运行npm i @vant/weapp -S --production ②修改 app.json，将app.json 中的 “style”: “v2” 去除 ③修改 project.config.json：

{
          
   
  ...
  "setting": {
          
   
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
          
   
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

四、配置Vuex 1.uni-app中内置了vuex，我们只需要引用就行了： 首先在根目录下创建store目录在里面创建index.js； 在index.js文件中配置state：

import {
          
    createStore } from vuex;
const store = createStore({
          
   
	state:{
          
   
		"username": "魏无羡",
		age: "18",
		"uid":"001"
	},
	// 定义mutations，用于修改状态（同步）
	mutations: {
          
   
		updateUid(state, payload) {
          
   
			state.uid = payload;
		}
	},
	// 定义actions，用于修改状态（异步）
	action: {
          
   
		updateUid(context, payload) {
          
   
			setTimeout(() => {
          
   
				context.commit(updateUid,payload)
			},1000)
		}
	},
	// getter（获取数据）
	getter: {
          
   
		formatUid(state) {
          
   
			return state.uid + 0
		}
	},
	modules:{
          
   }
})

export default store;

2.在main.js中添加相关代码：

import App from ./App
import store from ./store
// #ifdef VUE3
import {
          
    createSSRApp } from vue
export function createApp() {
          
   
  const app = createSSRApp(App)
	app.use(store)
  return {
          
   
    app
  }
}
// #endif

3.在页面中使用store：

<template>
	<view class="container">
		<view>{
         
  {store.state.username}}</view>
		<van-button type="primary" @click="gotoLogin()">前去登录</van-button>
	</view>
</template>

<script setup>
	import {
            
      useStore } from vuex
	const store = useStore();
	const gotoLogin = () =>{
            
     
		wx.navigateTo({
            
     
			url: ../login/index
		})
	}
</script>