uniapp实战项目 （仿知识星球App) - - 配置开发工具和全局css样式

时间：2024-12-18 07:36:01

实战项目名称：仿知识星球App
技术栈：前端 => uni-app （ 后端： + Mysql + Apollo + Graphql ）
已实现功能：微信登录，创建星球，内容管理，星球管理
项目git地址：请点击访问

项目最终效果图：@点击访问效果图，欢迎关注收藏订阅专栏！！！

  • 文章会先按照 ① uni-app端 、 ② 后端 、③ 微信小程序、④ 利用宝塔面板部署项目；先后顺序更新文章。

文章目录

  • 一、今日实战目标
  • 二、实战步骤
    • 1.安装HBuilderX开发工具
    • 2.新建项目
    • 3.配置全局通用css样式文件
  • 总结

提示：该项目只用于个人实战，不应用于任何商业用途。

一、今日实战目标

  • 配置好开发工具
  • 项目全局配置
  • 引入uView UI框架

二、实战步骤

1.安装HBuilderX开发工具

开发工具下载地址：HBuilderX下载链接

我用的是MacOS，以后展示也是Mac版的，建议下载正式版。
代码如下（示例）：

2.新建项目

打开HBuilderX工具，点击新建 => 新建项目;并按下方图片进行设置，项目类型选择uni-app，Vue版本选择2

在这里插入图片描述

3.配置全局通用css样式文件

  • 项目根目录新建static目录，新增文件,内容如下
/* default Setting */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	color: #384268;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'PingFangSC-Regular', 'Noto Sans TC', sans-serif;
}

.overflow-hidden {
	overflow: hidden;
}

.full{
	width: 100%;
}
/* Font Setting */
.bold {
	font-weight: bold;
}

/* Element specific css */
.stgap>*:not(:first-child) {
	margin-top: 5px;
}

.stgap1>*:not(:first-child) {
	margin-top: 10px;
}

.stgap2>*:not(:first-child) {
	margin-top: 20px;
}

.stgap3>*:not(:first-child) {
	margin-top: 30px;
}

.stgap4>*:not(:first-child) {
	margin-top: 40px;
}

.stgap5>*:not(:first-child) {
	margin-top: 50px;
}

.stgap6>*:not(:first-child) {
	margin-top: 60px;
}

.stgap7>*:not(:first-child) {
	margin-top: 70px;
}

.stgap8>*:not(:first-child) {
	margin-top: 80px;
}

.stgap9>*:not(:first-child) {
	margin-top: 90px;
}

.stgaph1>*:not(:first-child) {
	margin-top: 15px;
}

.stgaph2>*:not(:first-child) {
	margin-top: 25px;
}

.stgaph3>*:not(:first-child) {
	margin-top: 35px;
}

.stgaph4>*:not(:first-child) {
	margin-top: 45px;
}

.stgaph5>*:not(:first-child) {
	margin-top: 55px;
}

.stgaph6>*:not(:first-child) {
	margin-top: 65px;
}

.stgaph7>*:not(:first-child) {
	margin-top: 75px;
}

.stgaph8>*:not(:first-child) {
	margin-top: 85px;
}

.stgaph9>*:not(:first-child) {
	margin-top: 95px;
}

.slgap>*:not(:first-child) {
	margin-left: 5px;
}

.slgap1>*:not(:first-child) {
	margin-left: 10px;
}

.slgap2>*:not(:first-child) {
	margin-left: 20px;
}

.slgap3>*:not(:first-child) {
	margin-left: 30px;
}

.slgap4>*:not(:first-child) {
	margin-left: 40px;
}

.slgap5>*:not(:first-child) {
	margin-left: 50px;
}

.slgap6>*:not(:first-child) {
	margin-left: 60px;
}

.slgap7>*:not(:first-child) {
	margin-left: 70px;
}

.slgap8>*:not(:first-child) {
	margin-left: 80px;
}

.slgap9>*:not(:first-child) {
	margin-left: 90px;
}

.slgaph1>*:not(:first-child) {
	margin-left: 15px;
}

.slgaph2>*:not(:first-child) {
	margin-left: 25px;
}

.slgaph3>*:not(:first-child) {
	margin-left: 35px;
}

.slgaph4>*:not(:first-child) {
	margin-left: 45px;
}

.slgaph5>*:not(:first-child) {
	margin-left: 55px;
}

.slgaph6>*:not(:first-child) {
	margin-left: 65px;
}

.slgaph7>*:not(:first-child) {
	margin-left: 75px;
}

.slgaph8>*:not(:first-child) {
	margin-left: 85px;
}

.slgaph9>*:not(:first-child) {
	margin-left: 95px;
}

/* New flex css */
.flex {
	display: flex;
}

.row {
	display: flex;
	flex-direction: row !important;
}

.col {
	display: flex;
	flex-direction: column;
}

.row-rev {
	display: flex;
	flex-direction: row-reverse;
}

.col-rev {
	display: flex;
	flex-direction: column-reverse;
}

.warp {
	display: flex;
	flex-wrap: wrap;
}

.nowrap {
	display: flex;
	flex-wrap: nowrap;
}

.space-between {
	display: flex;
	justify-content: space-between;
}

.flex-start {
	display: flex;
	justify-content: flex-start;
}

.flex-center {
	display: flex;
	justify-content: center;
}

.flex-end {
	display: flex;
	justify-content: flex-end;
}



/* (Horizontal) The main spindle is X, the X axis is symmetrical */
.hor-center {
	display: flex;
	align-items: center;
}

.hor-start{
	display: flex;
	align-items: flex-start;
}
.hor-end {
	display: flex;
	align-items: flex-end;
}
/* (Vertical) The main spindle is Y, the Y axis is symmetrical */
.ver-center {
	display: flex;
	justify-content: center;
}

.ver-start{
	display: flex;
	justify-content: flex-start;
}
.ver-end {
	display: flex;
	justify-content: flex-end;
}

.both-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.text-overflow {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.text-overflow1,
.text-overflow2,
.text-overflow3,
.text-overflow4,
.text-overflow5 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.text-overflow1 {
	-webkit-line-clamp: 1;
}

.text-overflow2 {
	-webkit-line-clamp: 2;
}

.text-overflow3 {
	-webkit-line-clamp: 3;
}

.text-overflow4 {
	-webkit-line-clamp: 4;
}

.text-overflow5 {
	-webkit-line-clamp: 5;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.pre-line {
	white-space: pre-line;
	/*換行\n <br/>都能*/
}

/*== New CSS End ==*/
  • 在文件中，引入上面新增的css文件，配置这个是为了项目提高项目的开发效率，里面都是项目中会常用到的css样式
    在这里插入图片描述

总结

为了提高开发效率，项目也使用了uView UI框架，下一篇讲解如何引入uView框架，想了解这个框架的可以点击上面的蓝色字体链接进行访问

由于项目目前在对接后台api中，项目git地址：请点击访问，大家可以去clone下来借鉴下；

  • 温馨提示：
  1. 项目仅用于个人实战，设计图和架构是自己基于知识星球APP进行设计的，算得上是入门级的uni-app，后期会更新一个企业级uniapp项目。
  2. 我是在空闲中写写博客，并没有很规范，欢迎在评论区留下你的建议与意见。
  3. git项目拷贝下来的代码有不懂的，可以截图私信给我，看到会回复你，希望可以帮助到你了解和开发uniapp。

相关文章