vue+Element搭建后台管理系统（二）如何在vue中使用 elementUI

上次我们已经搭建好vue框架了，使用vue框架，我们都知道需要相对于的UI框架，这样对我们维护项目等有很大的好处。element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

如果不知道如何快速搭建vue项目的话，可以观看我之前的文章vue+Element搭建后台管理系统（一）快速搭建vue项目框架，写的还是比较详细的。

第一步、安装 elementUI
npm install element-ui -S

第二步、在main.js中引入 elementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)//全局引用 elementUI

第三步、使用 elementUI
接下来可以在components文件夹下的.vue文件中使用 elementUI了

</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            msg: "Welcome to Your Vue.js App",
            options: [
                {
                    value: "选项1",
                    label: "黄金糕"
                },
                {
                    value: "选项2",
                    label: "双皮奶"
                },
                {
                    value: "选项3",
                    label: "蚵仔煎"
                },
                {
                    value: "选项4",
                    label: "龙须面"
                },
                {
                    value: "选项5",
                    label: "北京烤鸭"
                }
            ],
            value: ""
        };
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>

这样我们就简单引入 elementUI，并使用了，更多的组件的使用方式请看 elementUI官方文档 elementUI