HBuilder创建uniapp项目(Vue3、Vant Weapp)

一、准备工作
    1.下载HBuilder ——uni-app(https://uniapp.dcloud.io/)
    2.下载微信开发者工具:
        https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
二、创建项目
    1.在点击工具栏里的文件 -> 新建 -> 项目:
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第1张图片
    2.选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。
选择Vue对应的开发版本
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第2张图片
    3.运行到微信开发者工具,其他的运行方法可以参考官方文档
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第3张图片
注意:第一次运行的时候需要配置微信开发者工具所在位置:
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第4张图片
    此时运行还是不能成功的话,需要打开微信开发者工具->设置->安全设置,将服务端口打开。(PS:第一次运行至微信开发者工具时可能不会自动打开,需要手动发开微信开发者工具,再在HBuilder中运行)
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第5张图片
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第6张图片
    到此为止,项目已经创建完成。
三、引入Vant Weapp 组件库
    1.打开官方文档 https://vant-contrib.gitee.io/vant-weapp/#/quickstart
    2.选择合适自己的安装方式,这里选择的是npm安装:
        npm i @vant/weapp -S --production
        PS:如果项目中存在package.json,执行的命令安装Vant Weapp,如果没有,则在项目根目录使用命令npm init,一路回车即可,会自动生成package.json
    3.安装成功之后,需要在根目录下新建文件夹wxcomponents,将node_modules -> @vant -> weapp -> dist文件复制到wxcomponents中,并且将复制过来的文件名修改为vant
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第7张图片
    4.在pages.json中按需引入组件,可以在globalStyle下全局引入,也可以在pages中对应的页面下引入所需组件

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

HBuilder创建uniapp项目(Vue3、Vant Weapp)_第8张图片
    5.在App.vue文件中引入样式:
        @import "/wxcomponents/vant/common/index.wxss";
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第9张图片
    5.在页面中使用组件button
    按钮
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第10张图片
    此时运行若未在页面上展示按钮,也并未报错的话,可以尝试:
        ①把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/"
      }
    ]
  }
}

HBuilder创建uniapp项目(Vue3、Vant Weapp)_第11张图片
四、配置Vuex
    1.uni-app中内置了vuex,我们只需要引用就行了:
        首先在根目录下创建store目录在里面创建index.js;
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第12张图片
        在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>

效果图:
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第13张图片
PS:在项目运行的过程中,会有如下报错:
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第14张图片
这个对项目开发影响不大,这个报错代表的只是小程序没有配置ID:
        找到manifest.json -> 微信小程序配置 -> 微信小程序AppID,把你的微信开发者的ID复制过来,然后刷新
HBuilder创建uniapp项目(Vue3、Vant Weapp)_第15张图片

你可能感兴趣的:(vue.js,前端,微信小程序)