vue配合iview/element等ui实现界面效果起步
iview与element都是与vue配合使用的ui框架,用法与配置基本一致,在此,我以iview为例,教你如何起步。
*首先,你需要有一定的vue基础,如果你还是个小白,可以去我之前介绍如何搭建一个vue项目先看看,点击下面的链接就OK了
http://www.jianshu.com/p/866999e513ef
vue.js使用vue-cli搭建...
1.安装
安装:方式有俩种
[1]:CDN 引入
<!-- 引入css样式 -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- 引入组件库 -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
[2]:npm安装
这种方式是一般实际开发所用的方式,所以如果你刚开始,我还是比较推荐这个,下面是安装以及引入的详细流程
2.npm安装
在你的项目路径下执行命令
$ npm install iview --save ---安装ui框架文件
安装成功后,就可以在项目文件下的 node_modules文件下看见iview文件
ok,如果你看见iview文件,你已经安装成功了
3.在你引入的项目的main.js文件进行配置
在你的main.js输入以下代码,引入iview
import iView from 'iview';
import 'iview/dist/styles/iview.css'; ---引入其css
当然,还有必不可少的一部,在vue的机制下,我们必须对其进行全局引用Vue.use(iView);
4.使用ui组件,展示 效果
完成以上步骤后,就好办啦,进入iview官网,将你需要的ui组件copy下来paste入你的页面就ok啦
<Button type="success" long>确认提交</Button>
<br><br>
<Button type="error" long>确认删除</Button>
比如我在官网copy下来俩个按钮的code,放置在我的页面
如果你的页面和上门的图片一样,出现iview的button组件,恭喜你,已经成功安装并引用了
5.建议
以上内容只是为了帮助初学者进行简单的起步,在实际开发中,其实会有很多的坑与问题,毕竟实战的环境更为复杂,so,我建议大家遇到问题还是要多看看api,当然,也要多余我交流哦。^_^,如果我的文字对你有用,记得点心关注我,给一点点动力支撑。
再附上一个工作之余做的小demo,高仿饿了么app,如果你有兴趣,在里面可以和我交流更多的东西,demo实现了vue-router,vue-resource,还有组件的复用,vue的动画实现,better-scroll实现联动效果等等等,实现一些更接近实战的效果,而且,我会在工作之余进行不断的优化,实现更多的效果,点击下面的链接就好啦
vue配合iview/element等ui实现界面效果起步的更多相关文章
- FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)
目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...
- vue统计组件库和ui框架
UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...
- 使用vue配合组件--转载
1.由饿了么 UED (知乎专栏)设计的桌面端组件库已经开源,文档:Element,仓库: GitHub - ElemeFE/element: Desktop UI elements for Vue. ...
- iview 和 Elemet UI 源码比较
(近期给自己立了个小flag,读源码,每周至少读1篇源码) 下面来谈谈iview 和 Elemet UI 这两个基于Vue 的UI 框架源码的基本结构以及区别. 一.文件结构开发主要放在根文件夹下的s ...
- Ag-grid控件使用pine:left后,配合iview下拉框,会出现闪烁
Ag-grid控件使用pinned:left后,配合iview下拉框,会出现闪烁 引起原因:下拉图标的反转动画 目前解决方案: 添加一个全局样式: 禁用动画,其他地方也是如此, 影响控件有:gz-tr ...
- Vue项目的创建和UI资源
Vue项目创建打包与UI资源 1.Vue项目创建 1.1 vue-cli脚手架 vue-cli是一个基于vue的构建工具,用于搭建vue项目的环境,有着兼容,方便,快速的优点,能够完全遵循前后端分离的 ...
- Mac OS X 10.9.3 UI 设置界面无法设置时区解决
10.9.3 在选项设置里无法设置时区,表现为选择时区的点的位置后无法保存,导致系统时间错乱,解决方法是用终端设置: sudo systemsetup -gettimezone sudo system ...
- shit vue & shit iview
shit vue & shit iview <Switch> !== <i-switch> https://www.iviewui.com/components/swi ...
- 5个界面效果很炫的JavaScript UI 框架
Web 开发很简单,Web 应用的 UI 开发却很复杂,如果能够利用一些成熟的 UI 框架可以大大的减少开发的复杂度.本文向你介绍 5 款界面效果很不错的 JS 框架. 1. ExtJS ExtJS ...
随机推荐
- [LC] 271. Encode and Decode Strings
Design an algorithm to encode a list of strings to a string. The encoded string is then sent over th ...
- [HNOI2003]操作系统 优先队列用法
题:https://www.cometoj.com/problem/1046 #include<bits/stdc++.h> using namespace std; typedef lo ...
- TCP与UDP 笔记
本文整理自:<图解TCP/IP 第5版>作者:[日] 竹下隆史,[日] 村山公保,[日] 荒井透,[日] 苅田幸雄 著译者:乌尼日其其格出版时间:2013-07 TCP提供可靠的通信传输, ...
- ADB命令-1
1.adb -s 指定设备号(用于已连接多个设备时) 2.adb install -r -t xxx 安装程序 3.adb pull 设备目录 本地目录 复制文件命令 4.adb push 向设 ...
- python往mysql数据库中写入数据和更新插入数据
本文链接:https://blog.csdn.net/Mr__lqy/article/details/85719603 1. 连接mysql import pymysql db = pymysql.c ...
- 基于ci框架 修改出来了一个带农历的万年历。
1这里没有写model:代码一看就懂,没什么负杂地方,就是麻烦一点. 直接control模块的代码: <?php if ( ! defined('BASEPATH')) exit('No dir ...
- 统计学方法(PCA、ICA、RCA、LCA)
---------------------------------------------------------------------------------------------------- ...
- oracle存储过程随笔
有时间要把最近总结的存储过程的问题总结一下,先占坑: create or replace procedure test_proc2 as cursor cur is select YWR,YWRZJH ...
- REVIT 卸载工具,完美彻底卸载清除干净revit各种残留注册表和文件
一些同学安装revit出错了,也有时候想重新安装revit的时候会出现这种本电脑windows系统已安装revit,你要是不留意直接安装,只会安装revit的附件,revit是不会安装上的.这种原因呢 ...
- PHP常用接口数据过滤的方法
<?php /** * global.func.php 公共函数库 */ /** * 返回经addslashes处理过的字符串或数组 * @param $string 需要处理的字符串或数组 * ...