vue-ui组件库

366 阅读1分钟

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

element-ui.cn/#/zh-CN

npm i element-ui -S

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

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

import ElementUI from 'element-ui';

轮播banner图实现

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

mint-ui.github.io/docs/#/

全局安装 npm install mint-ui -S

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

import Mint from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(Mint)

轮播banner图实现,可用

** 拦截器**

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

懒加载

安装

import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);

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

使用

mui

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

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

we-vue

官方文档api wevue.org/doc

安装

$ npm install we-vue --save

import WeVue from 'we-vue'

图标

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

使用git账号进行登录

把图标添加到购物车

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

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

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

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

无论是什么组件使用的方式是一样的,实质就是样式布局。 DOM样式、与用户交互、与数据