[vue]Vue整合Element-ui简单使用
ElementUI官网一、安装并简单使用elementui1、使用的阿里镜像 cnpmcnpm i element-ui -S目录下有这个文件 安装成功2、导入element 脚手架就在main.js中写入以下代码import ElementUI from 'element-ui'; //导入import 'element-ui/lib/theme-chalk/index.cs...
·
ElementUI官网
一、安装并简单使用elementui
1、使用的阿里镜像 cnpm
cnpm i element-ui -S
目录下有这个文件 安装成功
2、导入element 脚手架就在main.js中写入以下代码
在main中引入是全局的
import ElementUI from 'element-ui'; //导入
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//使用
3、简单的使用element
目录结构
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<Index/> <!--自定义的名字-->
</div>
</template>
<script>
import Index from './components/Index' //根据 名字Index 引用Index.vue
export default {
name: 'App',
components:{
Index//实现
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Index.vue
<template>
<div>
<!--在element 找到布局容器-->
<el-container>
<el-header>{{login}}</el-header>
<el-main>Main</el-main>
<el-footer>底部</el-footer>
</el-container>
</div>
</template>
<script>
export default {
name: '登录',
data () {
return {
login: '用户登录'
}
}
}
</script>
<style scoped>
<!--在element 找到布局容器 所对应的css-->
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
简单的使用效果
更多推荐
已为社区贡献2条内容
所有评论(0)