Uni-app的Vue项目实战从0开发流程总结

#1开发环境和项目创建（VScode）

HBuilder x --

在HBuilder X 中 可以直接创建Uniapp项目文件以及模板选择

也可以通过命令行创建（对应HBuilderX最新正式版）

vue create -p dcloudio/uni-preset-vue 项目名称

创建好项目可以直接在HBuilder X里运行，可以运行到手机模拟器，网页，和小程序模拟器里，

在运行前都要在manifest.json里配置对应的appID

VScode --

在VScode中 则需要获取基本模板文件，（环境要求node和vue-cli）这里是创建vite+ts版，更多创建版本和注意事项可以查看官方文档 （如命令行创建失败，请直接访问 gitee
 下载对应模板）

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

VScode常用插件-

VScode中有很多uniapp的插件，下面是开发中常用的uniapp插件和简单描述

uniapp-create-view    可以快速创建uniapp的页面,并注册页面路由

uni-helper  鼠标悬停代码提示

uniapp小程序扩展    鼠标悬停可以快速查阅相关的官方文档

如果使用的ts语言开发 还需要安装TS语言的声明文件，这样用的是pnpm获取

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

页面调试--

项目创建完毕则可以运行到手机模拟器中，app端一般在HBuilder X里运行和调试

运行下面的代码会将项目打包到dist的文件中，这里打包调试到微信小程序

pnpm dev:mp-weixin

然后将文件运行到调试工具里，这里运行到微信开发者工具中（在运行之前需要在manifest.json里配置微信的appid

在微信开发者工具里导入，找到对应文件的dist/build/mp-weixin,确定后就可以在微信开发者工具的模拟器运行项目了

#2基本架构

构建界面--

uni-app常用构建页面组件 分为内置组件和扩展组件uni-ui（具体使用说明请关注官方文档uniapp组件）

引入uni-ui（pnpm方式）

 pnpm i -D @uni-helper/uni-ui-types  

组件自动按需导入（官方提供）   //tip:配置修改要重启服务

	//pages.json

// 组件自动引入规则
	"easycom": {
           //自动扫描
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
		}
	},

 uni-ui的ts类型判断可以安装@uni-helper/uni-app-types

安装方式和基本配置可见官方文档              

安装后会让组件高亮显示，鼠标悬停可以看见组件类型和对应参数的规则

状态管理--

对于vue3项目的状态管理一般使用pinia，进行页面间数据交互

在uniapp项目中需要数据持久化需要安装插件pinia-plugin-persistedstate 将信息保存在localStorage实现持久化

前后端数据交互--

uniapp请求拦截器uni.addInterceptor可以实现基本需求，对请求前和请求后的数据处理

#3项目打包 发布和上线

项目打包--

在pack.json中提供了多种打包指令 下面是打包成微信小程序端

pnpm build:mp-weixin

打包后可以在微信开发者工具里上传和上线

打包成安卓app端则要在HBuilder X里运行项目并打包成apk文件

多端兼容问题--

uni-app可以实现对端打包上线，但也存在很多兼容性问题

常用的方法是条件编译

#ifdef 或 #ifndef 加 平台名称 开头，以 #endif 结尾。可以在不同平台里判断是否需要编译内部的代码

打包层网页端时会出现找不到css样式等文件的错误，这是因为小程序和网页的路由基础路径不同（默认是'/'），在小程序打包成网页端要在manifest.json文件中修改网页端的配置

  //网页端配置
  "h5": {
    "router": {
      "base": "./"
    }
  },

小程序端并不支持*选择器

h5端和app端打包后样式默认加了scoped隔离样式，以及网页端的页面视口和样式的不同，要根据不同的问题做不同的调整

更多内容可以关注uniapp官网跨端兼容