uniapp+vue3+vite+pinia2.0.33项目初始化

目录

准备工作

注意事项

使用vue-cli创建项目

 运行

---

准备工作

• 下载hbuild开发工具

HBuilderX-高效极客技巧

• 下载微信小程序开发工具

概览 | 微信开放文档

• uniapp

  uni-app官网

注意事项

1.node.js版本>=16

#windows查看node版本
C:\Users\22862>node -v
v18.16.0

使用vue-cli创建项目

1.  进入项目文件夹

   • C:\dev\wechat

2.  使用vue-cli命令创建vite项目

   • npx degit dcloudio/uni-preset-vue#vite my-vue3-project

     注：网络不好，可以根据uniapp官网提示去gitee直接下载脚手架。

3. 安装依赖

   • #进项目目录
     cd shop-wx
     
     #执行
     npm install

4. Hbuilderx导入创建的项目
   • 

5.  配置小程序Appid 和微信开发者工具

   • 工具设置里面配置微信开发者工具，便于调试

     

   • manifest.js配置appid，使用组件，调用微信地址信息

6. 新建页面

   • 

7. 配置底部菜单

8. pages.json配置

   {
   	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
   		{
   			"path": "pages/index/index",
   			"style": {
   				"navigationBarTitleText": "首页"
   			}
   		}, {
   			"path": "pages/write/write",
   			"style": {
   				"navigationBarTitleText": "发布",
   				"enablePullDownRefresh": false
   			}
   
   		}, {
   			"path": "pages/unused/unused",
   			"style": {
   				"navigationBarTitleText": "闲置",
   				"enablePullDownRefresh": false
   			}
   
   		}, {
   			"path": "pages/buy/buy",
   			"style": {
   				"navigationBarTitleText": "求购",
   				"enablePullDownRefresh": false
   			}
   
   		}, {
   			"path": "pages/mine/mine",
   			"style": {
   				"navigationBarTitleText": "我的",
   				"enablePullDownRefresh": false
   			}
   
   		}
   	],
   	"globalStyle": {
   		"navigationBarTextStyle": "black",
   		"navigationBarTitleText": "uni-app",
   		"navigationBarBackgroundColor": "#F8F8F8",
   		"backgroundColor": "#F8F8F8"
   	},
   	"tabBar": {
   		"color": "#7A7E83",
   		"selectedColor": "#3cc51f",
   		"borderStyle": "black",
   		"backgroundColor": "#ffffff",
   		"height": "50px",
   		"fontSize": "10px",
   		"iconWidth": "24px",
   		"spacing": "3px",
   		"iconfontSrc": "static/iconfont.ttf",
   		"list": [{
   			"pagePath": "pages/index/index",
   			"text": "首页"
   		},{
   			"pagePath": "pages/write/write",
   			"text": "发布"
   		}, {
   			"pagePath": "pages/unused/unused",
   			"text": "闲置"
   		}]
   	},
   	"easycom": {
   		"autoscan": true, //是否自动扫描组件
   		"custom": { //自定义扫描规则
   			"^uni-(.*)": "@/components/uni-$1.vue"
   		}
   	},
   	"topWindow": {
   		"path": "responsive/top-window.vue",
   		"style": {
   			"height": "44px"
   		}
   	},
   	"leftWindow": {
   		"path": "responsive/left-window.vue",
   		"style": {
   			"width": "300px"
   		}
   	},
   	"rightWindow": {
   		"path": "responsive/right-window.vue",
   		"style": {
   			"width": "300px"
   		},
   		"matchMedia": {
   			"minWidth": 768
   		}
   	}
   }

 运行