资讯专栏INFORMATION COLUMN

vue配合iview/element等ui实现界面效果起步

tommego / 2308人阅读

摘要:与都是与配合使用的框架,用法与配置基本一致,在此,我以为例,教你如何起步。如果我的文字对你有用,记得点心关注我,给一点点动力支撑。

iview与element都是与vue配合使用的ui框架,用法与配置基本一致,在此,我以iview为例,教你如何起步。
*首先,你需要有一定的vue基础,如果你还是个小白,可以去我之前介绍如何搭建一个vue项目先看看,点击下面的链接就OK了
http://www.jianshu.com/p/866999e513ef
vue.js使用vue-cli搭建...

1.安装

安装:方式有俩种

[1]:CDN 引入



[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啦

 
    

比如我在官网copy下来俩个按钮的code,放置在我的页面

如果你的页面和上门的图片一样,出现iview的button组件,恭喜你,已经成功安装并引用了

5.建议

以上内容只是为了帮助初学者进行简单的起步,在实际开发中,其实会有很多的坑与问题,毕竟实战的环境更为复杂,so,我建议大家遇到问题还是要多看看api,当然,也要多余我交流哦。^_^,如果我的文字对你有用,记得点心关注我,给一点点动力支撑。

再附上一个工作之余做的小demo,高仿饿了么app,如果你有兴趣,在里面可以和我交流更多的东西,demo实现了vue-router,vue-resource,还有组件的复用,vue的动画实现,better-scroll实现联动效果等等等,实现一些更接近实战的效果,而且,我会在工作之余进行不断的优化,实现更多的效果,点击下面的链接就好啦

https://github.com/PaiDaXingSWK/elema.git
点我进入demo

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50913.html

相关文章

  • vue配合iview/elementui实现界面效果起步

    摘要:与都是与配合使用的框架,用法与配置基本一致,在此,我以为例,教你如何起步。如果我的文字对你有用,记得点心关注我,给一点点动力支撑。 iview与element都是与vue配合使用的ui框架,用法与配置基本一致,在此,我以iview为例,教你如何起步。*首先,你需要有一定的vue基础,如果你还是个小白,可以去我之前介绍如何搭建一个vue项目先看看,点击下面的链接就OK了http://ww...

    Object 评论0 收藏0
  • VUE UI框架对比 element-uiiView

    摘要:而则是用到到指令结合的方式去生成,批量生成元素。表格操作列自定义渲染的时,使用的是的函数,直接在中插入对应模板表格分页都需要引入分页组件配合使用两者总体比较,要比简洁许多。 element VS iview(最近项目UI框架在选型 ,做了个分析, 不带有任何利益相关)主要从以下几个方面来做对比使用率(npm 平均下载频率,组件数量,star, issue…)API风格打包优化与设计师友...

    ZHAO_ 评论0 收藏0
  • 喜大普奔,Ant Design of Vue 1.0版本发布

    摘要:诞生于年月份,年月份正式开源,多次,发布个版本,个组件,共计个单测,测试覆盖率。得益于的稳定,自发布第一个版本起,都没有破坏性的更新,本次发布的版本自然也没有破坏性的更新。因要支持低版本的,暂时并没有提供该功能。 vue-antd-ui是一个站在巨人(antd)肩膀上的UI组件库,有着其它组件库没有的优势,几乎继承了antd所有的功能特点,自带antd各种buff。 vue-antd-...

    kamushin233 评论0 收藏0
  • vue 起步

    摘要:的二大核心响应式数据变化当视图发生改变,数据自动更新。组合的视图组件页面映射为组件树划分组件可复用利于维护。正在不断的学习中希望各位指点错误,一起讨论,一起进步,后续更新中 Vue是一套用于构建用户界面的渐进式框架,Vue的核心库只关注视图层,不仅容易上手,还便于与第三方库既有项目整合,相互独立而又可以任意整合。 showImg(https://segmentfault.com/img...

    hyuan 评论0 收藏0

发表评论

0条评论

tommego

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<