element-ui框架使用 介绍
可以类似bootstrap，但是是基于vue的，饿了么团队开发。
安装：前端项目目录下的终端 >: cnpm i element-ui -S 配置：main.js // 配置element-ui import ElementUI from \'element-ui\'; import \'element-ui/lib/theme-chalk/index.css\'; Vue.use(ElementUI); 使用：任何组件的模板中都可以使用 - 详细使用见官方文档 <template> <div> <Nav></Nav> <h1>element-ui</h1> <hr> <el-row :gutter="10"> <el-col :span="6"> <div></div> </el-col> <el-col :span="6"> <div></div> </el-col> <el-col :span="10" :offset="2"> <div></div> </el-col> </el-row> <el-container> <el-main> <el-row :gutter="10"> <el-col :sm="18" :md="12" :lg="6"> <div></div> </el-col> <el-col :sm="6" :md="12" :lg="18"> <div></div> </el-col> </el-row> </el-main> </el-container> <el-row> <i></i> <el-button type="primary" @click="alertAction1">信息框</el-button> <el-button type="success" @click="alertAction2">弹出框</el-button> </el-row> </div> </template> <script> import Nav from \'@/components/Nav\' export default { name: "EUI", components: { Nav }, methods: { alertAction1() { this.$message({ type: \'success\', message: \'message信息\', }) }, alertAction2() { this.$alert(\'内容...\', \'标题\') }, } } </script> <style scoped> .e-ui { width: 100%; height: 800px; background: pink; } h1 { text-align: center; } .grid-content { height: 40px; background-color: brown; margin-bottom: 10px; } i { font-size: 30px; } </style>