UI框架的了解

目录

 

UI组件库

UI库的分类

Vue项目的搭建

UI库的简单介绍

---

UI组件库

UI (user Interface)，即用户界面组件，使用规定的标签属性名称即可基于模板开发网站。UI库是一些封装好的组件的样式，相当于一个模板，可以在模板基础上替换内容，也可以进行修改。让用户在进行开发的时候，适当减少了工作量。

UI库的分类

UI库可以分为pc端和移动端。

PC端使用比较广泛的的UI库有：iView UI，Element UI，Bootstrap；

移动端使用比较广泛的UI库有：Mint UI，Amaze UI，MUI 

Vue项目的搭建

因为有些UI框架是基于vue.js的，所以必须先搭建好vue的开发环境，才能使用这些框架。vue的开发环境搭建可以分为npm安装和vue脚手架的安装。

npm:  Nodejs下的包管理器。

webpack: 它主要的用途是通过CommonJS的语法，把所有浏览器端需要发布的静态资源，做相应的准备，比如资源的合并和打包。

vue-cli:   用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

转自：https://www.cnblogs.com/651434092qq/p/11090737.html

• npm安装

去node.js官网下载：https://nodejs.org/en/  安装非常简单，基本上都是默认，安装地址可以改为自己的安装地址。

node.js里面包含有npm，打开命令提示符，  

 查看npm的本地仓库：npm list –global ，

修改npm的本地仓库位置：

修改成功后输入命令：npm list –global    就可以看到仓库改为自己建的文件夹里。

然后在npm中安装插件：

• 配置VUE

修改环境变量的path值：E:\HTMLBianYi\NodeJs\node_global

新增NODE_PATH：E:\HTMLBianYi\NodeJs\node_global\node_modules

验证vue是否安装成功：vue -v。一开始出现了问题：

'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。

然后我又以管理员的身份运行了一下

去网上查了一下解决方案：有两种，一种是：

第二种是：把vue.ps1文件删了，但是不太确定是删掉C:\Users\你的用户名\AppData\Roaming\npm里的vue.ps1,还是删掉我安装的那个E盘里的。有待尝试

• 初始化vue项目

       vue init webpack vue01   //创建vue项目

cd  项目名    //进入项目目录

npm install      //安装依赖

       npm run dev    //运行项目

UI库的简单介绍

• Bootstrap

官网：https://getbootstrap.com/

中文官网：https://www.bootcss.com/

使用教程参考：https://www.runoob.com/bootstrap/bootstrap-tutorial.html

能够做到响应式布局同时满足pc端和移动端；有大量的组件样式，接受定制；拥有完善的文档，使用起来更方便；比较成熟，在大量的项目中充分的使用和测试。但是代码量较大，修改起来较为麻烦；对IE兼容存在不小的问题。

使用步骤：创建文件夹结构；创建html骨架结构；引入相关样式文件；书写内容。

---

 

• Element UI（基于vue.js）

官网：https://element.eleme.cn/#/zh-CN

Element是饿了么前端开源维护的Vue UI组件库,是PC端的UI库，手机端有对应框架是 Mint UI。组件齐全，代码简洁，例子很丰富，文档比较详细，但是有些组件设计比较生硬。

首先创建一个vue项目，目录结构如下：

在命令行进入当前创建的vue项目的目录，输入：npm i element-ui -S

在项目的src文件夹里的main.js里导入Element-UI相关资源：

import ElementUI from 'element-ui'      //导入组件库
       import 'element-ui/lib/theme-chalk/index.css'    // 导入组件相关样式
       Vue.use(ElementUI)        //   配置Vue组件

用vs code打开项目需要安装一个vetur插件，在APP.vue文件里修改想要的样式。

在命令行按ctrl+c可以退出执行。

---

• iView UI（基于vue.js）

官网：https://www.iviewui.com/

       高质量、功能丰富友好的 API ，自由灵活地使用空间，事无巨细的文档，可自定义主题，还有非常丰富的实用的基础组件，效果也非常美观

首先和Element UI一样，先搭建一个vue项目，然后进入项目目录，在命令行输入npm install iview --save

在vs code 中打开项目，和Element UI非常相似

在项目中引入iview 在入口文件main.js中配置：

import iView from 'iview'

import 'iview/dist/styles/iview.css'

Vue.use(iView)

然后在APP.vue文件里修改从iview UI官网里引入想要的样式

---

• Mint UI（基于vue.js）

​​​​​​​官网：https://mint-ui.github.io/#!/zh-cn

Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。真正意义上的按需加载组件。使用方法同Element UI，安装依赖于npm install mint-ui -s。

---

• Amaze UI​​​​​​​（基于JQuery）

​​​​​​​官网：http://amazeui.shopxo.net/（以前的官网http://amazeui.org/失效了）

Amaze UI 是一个移动优先的跨屏前端框架。提供基础样式，网格，表格、表单、按钮及常用组件样式。Amaze UI 比较关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。 

首先去官网下载压缩包：

解压之后有一个assets文件夹，将里面的css、js文件添加进你的项目里面

在此之前，还需要引入一个jqurey.min.js文件，然后在html文件的头部引入这些核心文件。注意：jquey.min.js 文件必须放在 amaze 的 js 文件的前面。

<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/>
       <script type="text/javascript" src="js/jquery.min.js"></script>
       <script type="text/javascript" src="js/amazeui.min.js"></script>

引用的文件的链接地址也可以直接是官网的地址

然后就可以使用amaze官网的组件了。基于jquery的amaze的项目搭建比较方便

---

• MUI​​​​​​​

​​​​​​​官网：http://dev.dcloud.net.cn/mui/

最接近原生APP体验的高性能前端框架。它的 UI 是以 IOS 为主体设计的，也补充了android特有UI样式。官方称以后发展可以用其做 APP从而 提高用户使用流畅度

使用步骤

1.新建移动APP项目

2.选择mui项目

3.打开index.html文件进行修改

4.如果要修改样式的话需要自己引入相关的css和js文件

5.复制MUI官网里的相关的样式的代码就可以用了。

---

总结：目前对于这些UI库属于了解阶段，尝试了一下，可以对以后开发过程中使用这些框架有一个初步的了解，上手就会容易一些。

库和框架的区别：https://blog.csdn.net/hei_xiaomian/article/details/103364086?depth_1-utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromBaidu-8&utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromBaidu-8

https://bbs.csdn.net/topics/392559617