MUI框架-05-用MUI做简单App界面

电玩女神 2022-05-10 02:20 315阅读 0赞

## MUI框架-05-用MUI做一个简单App ##

*  MUI 是一个前端框架，前端框架就像 Bootstrap，EasyUI，Vue ,为了做 app 呢，就有了更加高效的 MUI，我觉得前端框架有很多，也没有必要都取掌握，找一个比较出名的，企业里常言道，适合自己的然后去深入了解
 *  当然呢这也是因为要想快速的下代码，使用框架是避免不了的，使用框架，记住一些操作是必须的，所以熟悉几个框架，然后多去了解多去用，高效是建立在记忆的基础上的
 *  ios 需要证书，本篇介绍做一个简单的安卓 app

### （1）MUI 组件 ###

*  有一个官方的组件预览 App，下载地址：[http://dcloud.io/hellomui/][http_dcloud.io_hellomui]  
    ![在这里插入图片描述][70]

### （2）组件 ###

*  需要什么组件直接就可以从官网拷贝
 *  官方文档：[http://dev.dcloud.net.cn/mui/ui/][http_dev.dcloud.net.cn_mui_ui]  
    ![在这里插入图片描述][70 1]

### （3）修改默认样式 ###

*  基础不懂请查看：[MUI框架-01-介绍-创建项目-简单页面][MUI_-01-_-_-]
 *  有时候我们觉得 MUI 自带的样式不满足我们的要求，或者还需要自己增加样式，这时候就需要我们去自定义一个 css 文件
 *  然后第一步就是我们在需要修改样式的 HTML 文件中**引入该 css 文件**
 *  快捷方式，直接在 head 标签中，输入：link 回车，选中 css 文件![在这里插入图片描述][70 2]
 *  然后在 css 文件中操作
 *  **比如我们需要修改头部的背景颜色：**
 *  1.我们在 header 标签 class 中加一个自己命名的属性值![在这里插入图片描述][70 3]
 *  2.在 css 文件中用 . 选择器  
    ![70 4][]
 *  3.保存，预览  
    ![70 5][]
 *  **对于特殊的一个内容：**
 *  当然对于特殊的一个样式可以加 id
 *  例如：修改列表第一项背景色
 *  html 文件：  
    ![70 6][]
 *  css 文件：  
    ![70 7][]
 *  预览：  
    ![70 8][]
 *  **总结：**
 *  1.class 用 . 巧记：泪点，泪点，泪点
 *  [2.id][] 用 \# 啊，记住泪点也就记住这个了
 *  3.记住怎么修改，也就会了所有的修改，这个必须记住

### （3）修改默认样式 2 ###

*  上面介绍了最简单的修改样式方法，还有其他的
 *  例如：我们要给所有 一个所有拥有 mui-table-view 的ul 标签下的所有 p 标签，将文字设置成红色
 *  在 css 文件中使用：a 空格 b 的写法表示什么下的标签，或者说某个类的标签的子孙标签，不止可以下一级，之哟啊在它下面都会生效
 *  HTML 文件：  
    ![70 6][]
 *  css 文件修改如下：  
    ![70 9][]
 *  预览：  
    ![70 10][]

### 总结 ###

*  然后利用官方组件，加上自己修改样式，就可以实现绝大多数界面的设计了
 *  不过现在做出来的只是前端显示页面，关于交互效果后面再介绍，拜拜

### 关于开发 ###

*  请查阅：[官方文档][http_dev.dcloud.net.cn_mui_ui]

[http_dcloud.io_hellomui]: http://dcloud.io/hellomui/
[70]: /images/20220510/cee0512e070743f9be76160a0d2d6e41.png
[http_dev.dcloud.net.cn_mui_ui]: http://dev.dcloud.net.cn/mui/ui/
[70 1]: /images/20220510/c41204cfa86e457c909bf89e47704d6a.png
[MUI_-01-_-_-]: https://blog.csdn.net/qq_40147863/article/details/82821876
[70 2]: /images/20220510/fab4bef618174b87ad226969530937c5.png
[70 3]: /images/20220510/45eb45bc337c4d99a127b1f71ab6a6f8.png
[70 4]: /images/20220510/9de89c29446e44a7a42376cd3a919a78.png
[70 5]: /images/20220510/e12cdbf19eb049c896ce23ea0458c8b3.png
[70 6]: /images/20220510/dbe9c09e242e45448453bfe32a73c910.png
[70 7]: /images/20220510/8c5b76b068364f12937743a2426638f2.png
[70 8]: /images/20220510/68e8816115274628a18abcdac3f78660.png
[2.id]: http://2.id
[70 9]: /images/20220510/a6f997f92c74471b84f1f543df57feea.png
[70 10]: /images/20220510/27e55f09f33c405493d703ab6d7d930a.png