vue中ui组件小汇总

element ui组件 【主要用于PC端】

官网 http://element-ui.cn/#/zh-CN

npm i element-ui -S

大写的-S指的是安装到生产环境， 大写的-D指的是按装到开发环境

使用在main.js中，是全局的

import ElementUI from &＃8216;element-ui&＃8217;;

轮播banner图实现

mint-ui组件 【主要用于移动端】

官网 https://mint-ui.github.io/doc&＃8230;

全局安装
npm install mint-ui -S

使用mint ui， 样式需要单独引入

import Mint from &＃8216;mint-ui&＃8217;
import &＃8216;mint-ui/lib/style.css&＃8217;

Vue.use(Mint)

轮播banner图实现，可用

拦截器

拦截器需要配合axios使用, 在请求数据过程中调用一种状态，请求数据完成结束提示状态。 实质展示数据加载的过程

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {

// Do something before request is sent

Mint.Indicator.open({
text: &＃8216;Loading&＃8230;&＃8217;,
spinnerType: &＃8216;fading-circle&＃8217;
});

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 &＃8216;mint-ui&＃8217;;
Vue.use(Lazyload);

可以安装全局，也可以安装在局部

使用

mui

官网 http://dev.dcloud.net.cn/mui/ui/

静态资源，一套单纯的js和css, 所以在使用的时候和普通的js和css用法相同

we-vue

官方文档api https://wevue.org/doc

安装

$ npm install we-vue &＃8211;save

import WeVue from &＃8216;we-vue&＃8217;

图标

https://www.iconfont.cn/ 阿里巴巴矢量图标库

使用git账号进行登录

把图标添加到购物车

下载全部，登录就可以使用

总结： vue实际项目中 关于静态文件引入css, js

一般情况，自定义的全局样式在index.html文件中使用link标签正常引入；

下载到node-modules模块里的组件样式和js要在main.js中引用。