当前位置: 首页 > Web前端 > HTML5

vue配合iview-element等ui实现界面效果

时间:2023-04-05 12:52:32 HTML5

iview和element都是与vue结合使用的ui框架。使用和配置基本相同。在此,我以iview为例,教大家如何入门。*首先你需要有一定的vue基础。如果你还是新手,可以去我之前关于如何搭建vue项目的介绍看看。点击下面链接就OK了http://www.jianshu.com/p/866999e513efvue.js使用vue-cli搭建...1.安装:有两种方式[1]:CDN导入[2]:这种npm安装的方式在实际开发中一般都会用到,所以如果你是刚入门,我还是推荐这种,下面下面是安装和介绍的详细过程2.npm安装在你的项目路径下执行命令$npminstalliview--save---安装ui框架文件安装成功后可以看到node_modules下的iview文件ok项目文件下的文件。如果你看到iview文件,你已经成功安装了它。3.在你引入的项目中配置main.js文件在你的main.js中输入如下代码,importiviewimportiViewfrom'iview';import'iview/dist/styles/iview.css';---引入它的css,当然少不了一个部分,在vue机制下,我们要全局引用它Vue.use(iView);4.使用ui组件显示效果完成以上步骤后,就好办了。复制ui组件并将其粘贴到您的页面中。确认提交

确认删除比如我复制了官网两个按钮的代码并将它们放在我的页面上。如果你的页面和门上的图片一样,就会出现iview的按钮组件。恭喜,已成功安装并引用。5.推荐使用以上内容只是为了帮助初学者轻松上手。在实际开发中,其实会存在很多陷阱和问题。毕竟实战环境更加复杂。所以,我建议大家遇到问题还是多看看api。当然,也饶了我交流^_^,如果我的话对你有用,记得关注我,给我一点动力。附上一个下班后做的小demo,高仿饿了么app,如果有兴趣可以和我交流里面更多的东西,demo实现了vue-router,vue-resource,以及componentsMultiplexing,vueanimation实现、better-scroll实现联动效果等,实现一些更贴近实战的效果。而且,我会在工作之后继续优化,以达到更多的效果。点击下方链接即可https://github.com/PaiDaXingSWK/elema.git点我进入demo