目录
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://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)
高质量、功能丰富友好的 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://bbs.csdn.net/topics/392559617