脚本宝典收集整理的这篇文章主要介绍了vue中ui组件小汇总,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
element ui组件 【主要用于PC端】
官网 http://element-ui.cn/#/zh-CN
npm i element-ui -S
大写的-S指的是安装到生产环境, 大写的-D指的是按装到开发环境
使用在main.js中,是全局的
import ElementUI from 'element-ui';
轮播banner图实现
mint-ui组件 【主要用于移动端】
官网 https://mint-ui.github.io/doc...
全局安装
npm install mint-ui -S
使用mint ui, 样式需要单独引入
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)
轮播banner图实现,可用
拦截器
拦截器需要配合axios使用, 在请求数据过程中调用一种状态,请求数据完成结束提示状态。 实质展示数据加载的过程
// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
// Do something before request is sent
Mint.Indicator.open({
text: 'Loading...',
spinnerType: 'fading-circle'
});
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
// Do something with response data
Mint. Indicator.close();
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
懒加载
安装
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
可以安装全局,也可以安装在局部
使用
<ul>
<li v-for="item in list">
<img v-lazy="item">
</li>
</ul>
mui
官网 http://dev.dcloud.net.cn/mui/ui/
静态资源,一套单纯的js和css, 所以在使用的时候和普通的js和css用法相同
we-vue
官方文档api https://wevue.org/doc
安装
$ npm install we-vue --save
import WeVue from 'we-vue'
图标
https://www.iconfont.cn/ 阿里巴巴矢量图标库
使用git账号进行登录
把图标添加到购物车
下载全部,登录就可以使用
总结: vue实际项目中 关于静态文件引入css, js
一般情况,自定义的全局样式在index.html文件中使用link标签正常引入;
下载到node-modules模块里的组件样式和js要在main.js中引用。
以上是脚本宝典为你收集整理的vue中ui组件小汇总全部内容,希望文章能够帮你解决vue中ui组件小汇总所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。