2.通过HbuilderX创建uni-appvue3项目
3.安装uni-appvue3编译器插件
5.开启服务端口
我们先来认识uni-app项目的目录结构。
├─pages业务页面文件存放的目录│└─index│└─index.vueindex页面├─static存放应用引用的本地静态资源的目录(注意：静态资源只能存放于此)├─unpackage非工程代码，一般存放运行或发行的编译结果├─index.htmlH5端页面├─main.jsVue初始化入口文件├─App.vue配置App全局样式、监听应用生命周期├─pages.json**配置页面路由、导航栏、tabBar等页面类信息**├─manifest.json**配置appid**、应用名称、logo、版本等打包信息└─uni.scssuni-app内置的常用样式变量解读pages.json用于配置页面路由、导航栏、tabBar等页面类信息
效果预览
参考代码
{//页面路由"pages":[{"path":"pages/index/index",//页面样式配置"style":{"navigationBarTitleText":"首页"}},{"path":"pages/my/my","style":{"navigationBarTitleText":"我的"}}],//全局样式配置"globalStyle":{"navigationBarTextStyle":"white","navigationBarTitleText":"uni-app","navigationBarBackgroundColor":"#27BA9B","backgroundColor":"#F8F8F8"},//tabBar配置"tabBar":{"selectedColor":"#27BA9B","list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"static/tabs/home_default.png","selectedIconPath":"static/tabs/home_selected.png"},{"pagePath":"pages/my/my","text":"我的","iconPath":"static/tabs/user_default.png","selectedIconPath":"static/tabs/user_selected.png"}]}}uni-app和原生小程序开发区别主要区别uni-app项目每个页面是一个.vue文件，数据绑定及事件处理同Vue.js规范：
主要功能
通过命令行创建uni-app项目，不必依赖HBuilderX，TypeScript类型支持友好。
命令行创建uni-app项目：
vue3+ts版
温馨提示:在manifest.json文件添加小程序appid方便真机预览
//tsconfig.json{"extends":"@vue/tsconfig/tsconfig.json","compilerOptions":{"sourceMap":true,"baseUrl":".","paths":{"@/*":["./src/*"]},"lib":["esnext","dom"],"types":["@dcloudio/types",+"@types/wechat-miniprogram",+"@uni-helper/uni-app-types"]},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]}注意：原配置experimentalRuntimeMode现无需添加。
选择自己习惯的编辑器开发uni-app项目即可。
使用VSCode编辑器写代码，实现tabBar案例+轮播图案例。
温馨提示：VSCode可通过快捷键Ctrl+i唤起代码提示。
听说三连能够给人带来好运！更有可能年入百w，进入大厂，上岸