052、Element-ui的简单使用

Element-ui

单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。

Element官网文档： http://element-cn.eleme.io/#/zh-CN/component/progress

1. 基本使用

1）在meiduo/components目录下新建Button.vue组件，编写内容：

<template>
    <div>
        <el-row>
          <el-button>默认按钮</el-button>
          <el-button type="primary">主要按钮</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button type="info">信息按钮</el-button>
          <el-button type="warning">警告按钮</el-button>
          <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

2）在router.js文件中添加路由规则。

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'

import Child1 from '../components/Child1.vue'
import Child2 from '../components/Child2.vue'
// 此处为新内容
import Button from '../components/Button.vue'


// 1. 在vue中使用路由插件
Vue.use(Router);

// 2. 定义路由规则
export default new Router({
    routes: [
        {
            path: '/',
            component: Child1
        },
        {
            path: '/child2',
            component: Child2
        },
        // 此外为新内容
        {
            path: '/button',
            component: Button
        }
    ]
})

3）在main.js中将emelent-ui引入到项目中。

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

// 导入定义好的路由
import router from './router/router.js'

// 导入ElementUI插件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 在vue中使用Element-UI插件
Vue.use(ElementUI);


new Vue({
    el: "#app",
    // 使用路由
    router: router,
    render: function (create) {
        return create(App);
    }
});

4）在浏览器中访问http://localhost:8080/#/button