uniapp

重生之代码世界我是小白

---

前端

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、重生之uniapp引入uview组件？

重生第一步从前端开始，为了避免复杂的工作我们直接开始引入Uview组件来简化前端操作，当然是因为我懒！！！这里我们以hbuilder为例，不要问为什么。

二、使用步骤

1.创建一个属于你自己的项目然后打开项目终端输入命令

代码如下（示例）：

npm install uview-ui

如果出现了警告等提示信息可以输入

cnpm install uview-ui

基本是万能的命令了，前面加c

引入时可能会提示你各种插件没装按照提示就可以了
同样也可以在hbuilder中插件中引入，如果引入失败进行加c操作

// 安装node-sass
npm i node-sass -D
 
// 安装sass-loader
npm i sass-loader -D

2.引入完成后我们需要修改配置了

代码如下（示例）：
找到你的pages.json文件，在顶部加入

"easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" },

找到你的uni.scss文件，在顶部加入

@import 'uview-ui/theme.scss';

找到你的App.vue文件,修改配置

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
	
	/*设置全局背景色*/
	page {
		background-color: #F9F7FA;
		font-style: normal;
	}
</style>

找到你的main.js文件，在顶部加入

import uView from "uview-ui";
Vue.use(uView);

---

三、uniapp原生样式简化css

1.基本常用的内置样式

文字省略——五折行等级：
u-line-1,u-line-2,u-line-3,u-line-4,u-line-5

定位:
u-relative——u-rela
u-absolute——u-abso
字体大小：
数值——rpx：x >= 20 && x <= 40；px：x >= 10 && x < 20
u-font-xs
断点——xs（22rpx）、sm（26）、md（28）、lg（30）、xl（34）
文字对齐——左中右三类：
u-text-left u-text-center u-text-right
内外边距：
x——1-80(可以等于80)之间的偶数(双数)；能被5除尽的1-80之间的数，如5，10，15，35等
u-p-x
u-p-l-x
u-p-t-x
u-p-r-x
u-p-b-x

u-m-x
u-m-l-x
u-m-t-x
u-m-r-x
u-m-b-x

flex布局：

u-flex： display: flex;

flex-direction: row;——默认方向

align-items: center;——列居中

换行： u-flex-wrap

不换行： u-flex-nowrap

列： 垂直居中——u-col-center

顶部对齐——u-col-top

底部对齐——u-col-bottom

行： 左边对齐——u-row-left

水平居中——u-row-center

右边对齐——u-row-right

两端对齐——u-row-between

左右对齐——u-row-around

子元素空间： u-flex-x——x >= 1 && x <= 12

总结

未完待续，我一定会回来的