vuejs 和 element 搭建的一个后台管理界面

vuejs 和 element 搭建的一个后台管理界面

介绍:

  这是一个用vuejs2.0element搭建的后台管理界面。

 

相关技术:

  vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。

  element:基于vuejs2.0的ui组件库。

  vue-router:一般单页面应用spa都要用到的前端路由。

  vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

 

效果图:

 

 

 

 

 

 

演示地址:https://taylorchen709.github.io/vue-admin/

源码地址:https://github.com/taylorchen709/vue-admin

使用:

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run build
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以的,使用VueElement组合的方式可以轻松地开发出一个现代化的后台管理界面。下面是一个简单的步骤: 1. 安装VueElement 使用npm或者yarn安装VueElement,具体命令如下: ``` npm install vue npm install element-ui ``` 2. 创建Vue项目 使用Vue CLI创建一个新的Vue项目,具体命令如下: ``` vue create my-project ``` 3. 引入ElementVue项目中,可以在main.js文件中引入Element: ``` import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 4. 创建后台管理页面 使用VueElement,可以轻松地创建后台管理页面。例如,可以使用Element的Layout组件,创建一个左侧导航栏和右侧内容区域的布局: ``` <template> <el-container> <el-aside width="200px"> <!-- 左侧导航栏 --> </el-aside> <el-main> <!-- 右侧内容区域 --> </el-main> </el-container> </template> ``` 5. 使用Element组件 使用Element的组件可以快速地开发出后台管理界面。例如,可以使用Element的Table组件创建一个数据表格: ``` <el-table :data="tableData"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 6. 定制主题 如果需要定制主题,可以使用Element提供的主题定制工具或者手动修改样式。具体方法可以参考Element官方文档。 以上就是使用VueElement创建后台管理界面的简单步骤。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值