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