uni-app配置

运行到微信开发者工具

第一步： 配置微信开发者工具的路径 这个在点击运行的时候 会提示
第二部： 配置appid 为自己的微信开发者工具的appid manifest.json =>微信小程序配置
第三步： 开发服务 打开微信开发者工具右上角的小齿轮 里面有个安全 然后把服务端口打开

下载插件

hbuilder-x 工具 选择插件下载 就会跳进去让你选择 导入到huilder-x就行 一般选择scass less vue提示等等插件 按需下载

配置Ui组件库

1 内置的 uni.css 这个可以新建一个Uni的模板app 里面有uni.css 直接拷贝过来 新创建一个common 文件放进去
2 aimate.css 这个可以Install 使用快捷键alt + c
3 icon.css 图标库
4 common.css 这个是公共样式库
然后再 app.vue 里面引用

@import  './common/common.css';
	@import './common/icon.css';
	@import  './common/uni.css';
	@import  './common/animate.css';

animate.css 直接再class里面加就行了 不生效的话改一下 aniate.css :root 改为 page

iconfont 使用啊里的iconfont组件库 添加好后下载 使用里面的iconfont.css 需要把url相关的都删除 然后复制到 icon.css就行了
或者直接把下载的都复制进去 然后需要改一下iconfont.css的位置

src: url('/common/iconfont.woff2?t=1686820129233') format('woff2'),
       url('/common/iconfont.woff?t=1686820129233') format('woff'),
       url('/common/iconfont.ttf?t=1686820129233') format('truetype');

我这里放在了common下 所以加了个common

设置全局样式
common.css

page {
	height: 100%;
	font-size: 28upx;
	line-height: 1.8;
	#设置背景颜色
	backbround: #fffff;
}
image{ width: 100% }
#主体颜色
.main-bg-color{ background: #FD6801; }
.main-bg-hover-color { backbround :rgba( 253,104, 1,0.85)}
.main-text-color { background: #FD6801;}
.main-border-color { border-color: #F1F1F1}