【标准uniapp创建和引入一些资源的基本操作，可作为基础模版——Vue3、HbuilderX3.99】

本文详细介绍了使用uni-app进行项目创建及资源引入，包括自定义顶部导航栏避免Sass样式失效的问题，创建与引入common.css、uni.css、iconfont.css，以及在页面json配置底部导航TabBar，同时讲解了swiper组件的坑，首页推荐和文字封装组件的开发过程。涉及到Vue3和H5、小程序的差异化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百年奥莱App学习

大家注意！！！要用自定义顶部导航栏千万别用Sass的形式，特别是样式，style lang="scss"，不要这样用，不然会失效，显示不出iconfont字体图标，这是试验多次得出的结果，由于没截图所以就在此特别提醒说明一下，*以防踩坑*，不知道为什么会不显示，翻阅大量资料，有的说sass unicode字符编码有问题，有的说Sass将Unicode编译成文字字符（双字节字符）会导致icon乱码问题，还有的说加上<style lang="scss">,因为要在App.vue中引入，之前我的App。vue里的style没加lang="scss"，但是后来加上也没用，所以就老老实实用CSS的方式了，结果令人惊讶，图标显示了。至此都不知道为啥Scss就无效，若是哪位大佬有缘看到这篇文章，还请告知讲解下，谢谢！！！
--------------------******************************************************************-----------------------
创建项目和引入文件
底部导航TabBar开发
首页swiper部分开发
效果图跟着差不多
- swiper的坑总结：
首页推荐部分开发
首页-文字封装开发
【首页】商品列表和单个商品组件封装

大家注意！！！要用自定义顶部导航栏千万别用Sass的形式，特别是样式，style lang=“scss”，不要这样用，不然会失效，显示不出iconfont字体图标，这是试验多次得出的结果，由于没截图所以就在此特别提醒说明一下，以防踩坑，不知道为什么会不显示，翻阅大量资料，有的说sass unicode字符编码有问题，有的说Sass将Unicode编译成文字字符（双字节字符）会导致icon乱码问题，还有的说加上

--------------------******************************************************************-----------------------

创建项目和引入文件

创建项目——创建目录结构。
在这里插入图片描述

在common目录中创建文件：common.css

注：common.css为全局css样式文件，其内容目前有：
在这里插入图片描述

在common目录中创建文件：uni.css

注：uni.css为uni-app演示站文件，可理解为官方定义好的css默认样式。
注意：这个很重要！！！记得在App.vue中引入，否则不生效。

在common目录中创建文件：iconfont.css。

下载iconfont文件
在这里插入图片描述

注：iconfont.css是引入了阿里巴巴字体图标库的文件。这里要注意针对iconfont修改了的内容，完整版代码如下：

@font-face {
font-family: ‘iconfont’; /* Project id 4414543 /
src: / 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
url(‘https://at.alicdn.com/t/c/font_4414543_ks4t3zq8b9m.woff2?t=1705485484823’) format(‘woff2’),
url(‘https://at.alicdn.com/t/c/font_4414543_ks4t3zq8b9m.woff?t=1705485484823’) format(‘woff’),
url(‘https://at.alicdn.com/t/c/font_4414543_ks4t3zq8b9m.ttf?t=1705485484823’) format(‘truetype’);
}

在这里插入图片描述

记得挂载引入
在这里插入图片描述

引入iconfont可参考：https://www.cnblogs.com/lightmusic/p/11819260.html
在这里插入图片描述

在static目录中引入文件有：uni.ttf文件

注：此文件是官方图标库文件，不引入会报错（因为引入了uni.css）
最后在static文件中下载了项目底部的所有选中以及未选中图片。

最后最后最后运行，会有报错提示：
在这里插入图片描述
[stylelint] Unexpected missing generic font family font-family-no-missing-generic-family-keyword

翻译为：意外丢失的通用字体家族…
意思是：不允许在使用的字体名称列表中缺少通用字体
我是这样解决的：
在这里插入图片描述
详细说明可参考：https://blog.csdn.net/a1056244734/article/details/125783641
解决办法可参考：https://blog.csdn.net/weixin_63042378/article/details/132721110

底部导航TabBar开发

在pages.json中进行配置

“tabBar”: {
“color”: “#7A7E83”,
“selectedColor”: “#3cc51f”,
“borderStyle”: “black”,
“backgroundColor”: “#ffffff”,
“list”: [
{
“pagePath”: “pages/index/index”,
“iconPath”: “static/tabbar/index.png”,
“selectedIconPath”: “static/tabbar/indexSelected.png”,
“text”: “首页”
},
{
“pagePath”: “pages/list/list”,
“iconPath”: “static/tabbar/list.png”,
“selectedIconPath”: “static/tabbar/listSelected.png”,
“text”: “分类”
},
{