一: 简介
Mint UI 包含丰富的 CSS 和 JS 组件, 能够满足日常的移动端开发需要. 通过它, 可以快速构建出风格统一的页面, 提升开发效率. 真正意义上的按需加载组件. 可以只加载声明过的组件及其样式文件, 无需再纠结文件体积过大. 考虑到移动端的性能门槛, Mint UI 采用 CSS3 处理各种动效, 避免浏览器进行不必要的重绘和重排, 从而使用户获得流畅顺滑的体验. 依托 vue.js 高效的组件化方案, Mint UI 做到了轻量化. 即使全部引入, 压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip.
注意: MUI 不同于 Mint-ui,Mui 只是开发出来一套好用的代码片段, 里面提供了配套的样式, 配套的 html 代码段, 类似于 Bootstrap, 而 Mint-UI 是真正的组件库, 是使用 vue 技术封装出来的成套的组件可以无缝的和 VUE 项目进行集成开发; 因此从体验上来说, Mint-UI 体验更好, 因为这是别人帮我们开发好的现成组件, 从体验上看来 MUI 和 Bootstrapt 类似; 理论上, 任何项目都可以使用 MUI 和 Bootstrapt, 但是 Mint-U 只适用于 Vue 项目.
注意: MUI 并不能使用 NPM 去下载, 需要手动从 GitHub 上下载现成的包, 自己解压出来, 然后手动拷贝到项目中去使用
Mint-UI 官网: https://mint-ui.github.io/#!/zh-cn
二: 基本框架搭建
项目目录:
App.vue
index.HTML
main.JS
router.JS
.babelrc
package.JSON
webpack.config.JS
三: 导航头部
main.JS
App.vue
样式展示
解决上面固定布局脱离文档流遮盖问题: App.vue
四: 底部导航栏
引入 MUI
GitHub 下载 MUI 包, 取文件到项目中
main.JS
App.vue
五: 代码管理
1: 创立开源协议, LICENSE 参考如下
- https://choosealicense.com/
- https://choosealicense.com/licenses/mit/#
- 2:gitignore
3: 项目描述文件, 自我陈述
4: 提交代码
Git init 新建一个空的仓库
Git status 查看状态
Git add . 添加文件
Git commit -m '注释' 提交添加的文件并备注说明
Git remote add origin Git@GitHub.com:jinzhaogit/Git.Git 连接远程仓库
Git push -u origin master 将本地仓库文件推送到远程仓库
Git log 查看变更日志
Git reset --hard 版本号前六位 回归到指定版本
Git branch 查看分支
Git branch newname 创建一个叫 newname 的分支
Git checkout newname 切换到叫 newname 的分支上
Git merge newname 把 newname 分支合并到当前分支上
Git pull origin master 将 master 分支上的内容拉到本地上
六: 底部导航栏图标更改及路由切换
注意: 部分图标需要用到 extra.ttf, 注意 fonts 文件添加, 并导入 CSS 样式
注册路由
七: 路由切换高亮
八: 底部导航页面组件路由
建立组件文件
router.JS
App.vue
来源: https://www.cnblogs.com/jinzhaozhao/p/10022577.html