Element:饿了么团队研发的,一套为开发者、设计者和产品经理准备的基于Vue2.0的桌面端组件库。
组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等
Element快速入门:
右键文件,点击“在集成终端中打开”,再安装ELementUI组件库
关于第二布:在main.js引入组件库如下:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
关于第三步:在App.vue引入ElementView,App.vue代码如下:
<template>
<div>
<!--<h1>{{ message }}</h1>-->
<e-lement-view></e-lement-view>
</div>
</template>
<script>
import ELementView from './views/element/ELementView.vue'
export default{
components: { ELementView },
data(){
return {
message:"Hello vue"
}
},
methods:{
}
}
</script>
<style>
</style>
ElementView.vue代码如下:
<template>
<div>
<!--button按钮-->
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default{
}
</script>
<style>
</style>
这样