vue-day10----vue中常用的ui框架、mint-ui的使用、mint-ui按需加载-借助babel-plugin-component插件、vant的使用-有赞、cube的使用-滴滴、element-ui的使用

### key值

    虚拟DOM对比节点是否需要更新，通过key值比较，key值建议不要用随机数或下标，用id值，保持唯一性。

 

### commit()方法没有返回值

    commit()方法没有返回值，在mutations中定义的方法就是用来修改state中的值的，如果要封装一些自己用的方法，在store实例外面用ES5的方式声明。如果在mutations中声明，再通过commit()在另一个mutations中方法中调用，因为commit()没有返回值，所以拿不到这个值。

 

### let obj1={...obj}

    用解构的方式去复制对象，如果被复制对象只有一层，那么两个对象之间没有引用关系。

 

### splice()的用途

    前面watch监听中提到过在特殊情况下无法监听到数组的变化，一是通过下标来更改数组中的数据，二是通过length来将数据清空，对应的解决办法是通过vue的实例方法$set()进行设置，通过splice()来清空数组。

 

    在vuex中，通过下标对数组进行修改无效，此时通过splice()可以进行修改。

 

### vue中常用的ui框架

    pc端：

        element-ui

        iview

    

    移动端：

        mint-ui

        vant

        cube

        antd vue

### mint-ui的使用

    ①安装：npm install mint-ui -S

    ②main.js中引入全部组件：

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

    ③ui组件直接在根组件App.vue使用：

        <h1>css组件</h1>
        <h3>样式</h3>
        <mt-button type="default">default</mt-button>
        <mt-button type="primary">primary</mt-button>
        <mt-button type="danger">danger</mt-button>
        <h3>尺寸</h3>
        <mt-button size="small">small</mt-button>
        <mt-button size="large">large</mt-button>
        <mt-button size="normal">normal</mt-button>

        <mt-button disabled>disabled</mt-button>
        <mt-button plain>plain</mt-button>

        <h3>icon</h3>
        <mt-button icon="back">back</mt-button>
        <mt-button icon="more">more</mt-button>

        <h3>自定义icon</h3>
        <mt-button>
            <img src="../public/img/01.jpg" height="20" width="20" slot="icon">
            icon
        </mt-button>
        <h1>js组件</h1>
        <button @click="toast">toast</button>

    ④js组件需要引入再使用：

        import {Toast} from 'mint-ui';


        Toast({
            message:"点击我了，操作成功",   // 信息
            position:"center",  // 位置
            duration:3000       // 持续时间
        });

 

### mint-ui按需加载-借助babel-plugin-component插件

    ①安装babel-plugin-component：npm install babel-plugin-component -D

    ②项目根目录下新建 .babelrc 文件：

        {
            "plugins": [
                [
                    "component",
                    {
                        "libraryName": "mint-ui",
                        "style": true
                    }
                ]
            ]
        }

    ③main.js中引入组件并注册（不再使用 import Mint from 'mint-ui';Vue.use(Mint);    这里在main.js中引入所有的组件都可以用，可以在需要该组件的组件中引入，只有当前组件可用）：

        import "mint-ui/lib/style.min.css";
        import {Button,Header} from 'mint-ui';
        Vue.component('my-btn', Button);
        Vue.component(Header.name,Header);

    ④根组件App.vue中Header组件使用mint-ui默认的名字作为标签使用，Button组件使用自定义标签名：

        <mt-header title="fixed top"></mt-header>
        <my-btn type="default">default</my-btn>
        <my-btn type="primary">primary</my-btn>
        <my-btn type="danger">danger</my-btn>

 

### vant的使用-有赞

    ①安装vant：npm i vant -S

    ②安装自动按需引入插件：npm i babel-plugin-import -D

    ③根目录下babel.config.js文件中添加plugins配置项：

        plugins: [
            ['import', {
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
            }, 'vant']
        ]

    ④接着你可以在代码中直接引入 Vant 组件（这里不需要引入css，插件会自动引入）：

        import Vue from "vue";
        import { Button } from 'vant';
        Vue.use(Button);// 自动按需引入插件已经帮我们注册好了

    ④使用vant的button：

        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>

    ⑤使用icon：

        import Vue from "vue";
        import { Button,Icon } from 'vant';
        Vue.use(Button);
        Vue.use(Icon);

        <van-icon name="success" dot />
        <van-icon name="eye-o" info="9" />
        <van-icon name="chat-o" info="99+" />

 

### cube的使用-滴滴

    ①安装插件：npm install vue-cli-plugin-cube-ui -S（用cmd安装）

    ②添加cube-ui：vue add cube-ui

        Use post-compile?（是否使用后期编译） ----y

        Import type（引入类型） ----partly（按需引入）

        Custom theme?（自定义主题） ----n

        Use rem layout?（rem布局） ----n

        Use vw layout?（vm布局） ----n

    ③App.vue中直接使用：

        <cube-button>Button</cube-button>
        <cube-button type="submit">Submit Button</cube-button>

 

### element-ui的使用

    ①安装：npm i element-ui -S

    ②安装按需引入插件：npm install babel-plugin-component -D

    ③配置babel.config.js文件，将以下代码粘贴到plugins中（plugins中配置项是一个个数组）：

        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]