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组件的单独使用（第一种方法）：

1、安装依赖

cnpm install babel-plugin-component -D

-D：--save-dev 的缩写
2、在babel.config.js 配置文件中添加plugins

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

3、在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';