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中引用。