Vue16-Vue UI组件库

Vue16-Vue UI组件库

1.移动端常用组件库

1. Vant，https://youzan.github.io/vant。
2. Cobe UI, https://didi.github.io/cube-ui。
3. Mint UI, https://mint-ui.github.io。

2.PC端常用组件库

1. Element UI，https://element.eleme.cn。
2. IView UI，https://www.iviewui.com。

3.Element UI组件库的按照和使用

1. 安装Element UI，npm i element-ui。
2. main.js中引入并使用Element UI。

// 引入完整的Element UI
import ElementUI from 'element-ui'
// 引入Element UI全部样式
import 'element-ui/lib/theme-chalk/index.css'

// 使用Element UI
Vue.use(ElementUI);

3. App.js中使用Element UI中的组件。

<template>
    <div>
        <h3>原生样式</h3>
        <button>按钮</button>
        <input type="text">

        <h3>element ui样式</h3>
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
        </el-row>

        <!-- 日期选择器 -->
        <el-date-picker
                type="date"
                placeholder="选择日期">
        </el-date-picker>
    </div>
</template>

<script>
    export default {
        name: "App",
    }
</script>

4.Element UI按需引入

1. 安装babel-plugin-component，npm install babel-plugin-component -D。
2. 修改babel.config.js中的内容，修改后的babel.config.js。

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

3. main.js中引入需要的Element UI组件，CSS样式会根据引入的组件分析，按需引入。

import Vue from 'vue'
import App from './App'

// Element UI按需引入
// 1 引入需要的组件。
import { Button, Row, DatePicker } from 'element-ui';

// 2 注册组件。
// Button.name，Button上有name属性，值为el-button，即将组件的名称指定为el-button。
// 所以使用的使用采用<el-button></el-button>
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
Vue.component(DatePicker.name, DatePicker);
new Vue({
    el: '#app',
    render: h => h(App),
});