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

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

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

文章目录

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

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

一、今日实战目标

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

二、实战步骤

1.安装HBuilderX开发工具

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

我用的是MacOS，以后展示也是Mac版的，建议下载正式版。

2.新建项目

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

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

项目根目录新建static目录，新增default.css文件,内容如下

/* 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 ==*/

在App.vue文件中，引入上面新增的css文件，配置这个是为了项目提高项目的开发效率，里面都是项目中会常用到的css样式

总结

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

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

温馨提示：

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

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

uniapp实战项目（仿知识星球App) - - tabBar配置
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 引入uView框架
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 效果篇
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 利用computed监听用户操作
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 封装组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目（仿知识星球App) - - 实现图片懒加载
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp实战项目仿糗事百科_项目设计最好用的底层思考模型——黄金圈
为什么要学习黄金圈法则如何学习黄金圈法则学习黄金圈法则哪些内容彩蛋全文共计2200字,10张图片I阅读13分钟为什么要学习黄金圈法则在工作中和生活中,你是否遇到过以下的困惑: 1-老板突然 ...
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址实际案例图片修改收货地址和修改默认地址页面布局和功能具体内容图片自己替换哈,随便找了个图片的做示例用到了vuex的状态机,具体 ...

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

文章目录

一、今日实战目标

二、实战步骤

1.安装HBuilderX开发工具

2.新建项目

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

总结

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

最新文章

热门文章

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

文章目录

一、今日实战目标

二、实战步骤

1.安装HBuilderX开发工具

2.新建项目

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

总结

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

最新文章

热门文章

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

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