vue框架的使用

基於Vue的Ui框架---餓了麼公司基於vue開的的vue的Ui組件庫
Element Ui：基於vue pc端的Ui框架。
MintUi：基於vue 移動端的Ui框架。

mintUI的使用：

1.找官網
2.安裝

cnpm install mint-ui -S

3.引入mint Ui的css 和 插件

import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'

4.看文檔直接使用。
在mintUi組件上面執行事件的寫法:@click.native

示例1：
配置完MintUI後：
若是把官方文檔中例子的代碼複製到項目裏能用就用。不能用就把官方包中的組件複製到項目中，而後在其餘組件中引用。

新建一個組件：Picture.vue

<template>
    <div id="picture">
        <mt-button @click.native="flag = true" size="large">選擇用戶頭像</mt-button>
        <mt-actionsheet :actions="actions" v-model="flag"></mt-actionsheet>
    </div>
</template>

<script>
    export default {
        name: "Picture",
        data() {
            return {
                list: [],
                flag: false,
                actions: []
            }
        },
        methods: {
            takePhoto() {
                alert('執行拍照');
            },
            openAlbum() {
                alert('打開相冊');
            }
        },
        mounted() {
            this.actions = [{
                name: '拍照',
                method: this.takePhoto
            }, {
                name: '從相冊中選擇',
                method: this.openAlbum
            }];
        }
    }
</script>

<style scoped>

</style>

示例2：
下載mint-ui-master 包，將其中example>pages中所要用的vue組價複製到項目中：
好比：複製action-sheet.vue到項目中。重命名爲ActionSheet.vue。在Picture.vue中引用。

Picture.vue

<template>
    <div id="picture">
        <v-actionSheet></v-actionSheet>
        <mt-button @click.native="flag = true" size="large">選擇用戶頭像</mt-button>
        <mt-actionsheet :actions="actions" v-model="flag"></mt-actionsheet>
    </div>
</template>

<script>
    import ActionSheet from "./ActionSheet";
    export default {
        name: "Picture",
        components:{
            'v-actionSheet':ActionSheet,
        },
        data() {
            return {
                list: [],
                flag: false,
                actions: []
            }
        },
        methods: {
            takePhoto() {
                alert('執行拍照');
            },
            openAlbum() {
                alert('打開相冊');
            }
        },
        mounted() {
            this.actions = [{
                name: '拍照',
                method: this.takePhoto
            }, {
                name: '從相冊中選擇',
                method: this.openAlbum
            }];
        }
    }
</script>

<style scoped>

</style>

示例3：
Mint Ui infinite-scroll結合api接口實現真實上拉分頁加載更多
Infinite scroll 無限滾動指令。加載頁面的時候會自動觸發一次 loadMore
爲 HTML 元素添加 v-infinite-scroll 指令便可使用無限滾動。滾動該元素，當其底部與被滾動元素底部的距離小於給定的閾值（經過 infinite-scroll-distance 設置）時，綁定到 v-infinite-scroll 指令的方法就會被觸發。
infinite-scroll-disabled:若爲真，則無限滾動不會被觸發

loadMore() {
  this.loading = true;
  setTimeout(() => {
    let last = this.list[this.list.length - 1];
    for (let i = 1; i <= 10; i++) {
      this.list.push(last + i);
    }
    this.loading = false;
  }, 2500);
}

綜合：

<template>
    <div id="news">
        <p>新聞頁</p>
        <ul class="newList" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
            <li v-for="(item,  key) in list" :key="key">
                {{ item.title }}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "News",
        data() {
            return {
                msg: "這是新聞組件",
                loading: false,
                page: 1,
                list: [],
            }
        },
        methods: {
            loadMore() {
                this.getNewsList();
            },
            getNewsList() {
                this.loading = true;
                let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
                this.$http.get(api).then((res) => {
                    this.list = this.list.concat(res.body.result);
                    this.page += 1;
                    //判斷最後一頁是否有數據。若沒數據，將loading =false,關閉無限滾動。
                    if (res.body.result.length < 20) {
                        this.loading = true;
                    } else {
                        this.loading = false;
                    }
                })
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .newList li {
        height: 3.4rem;
        line-height: 3.4rem;
        font-size: 1.3rem;
    }

    .newList li a {
        color: #2c3e50;
    }
</style>

element UI的使用

element UI的使用：
1.找官網
2.安裝

cnpm i element-ui -S

3.使用方式

方式1：徹底引入，會致使項目過大

(1).引入element UI的css 和 插件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

(2).webpack.config.js 配置file_loader (不用也行)

{
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
              }

(3). 看文檔直接使用。把所要用的代碼直接複製進項目裏便可。

方式2：element UI組件的單獨使用（第一種方法）：

一、安裝依賴

cnpm install babel-plugin-component -D

-D：--save-dev 的縮寫
二、在babel.config.js 配置文件中添加plugins

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ["component",{
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]]
}

三、在main.js中

import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

方式3：

在main.js中引入所要用的插件

import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

引入對應的css

import 'element-ui/lib/theme-chalk/index.css';