【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
前言
后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容。比如阿里云、七牛云、头条号、百家号等等,他们的管理系统都是这样的。
现在我们从零开始,给小伙伴们讲讲如何来搭建这样的一个前端页面框架,主要用到 VUE + Element UI。
生成项目
用Vue脚手架初始化一个基于 webpack 模板的新项目
vue init webpack testadmin
一路向下,会提示你项目名称、项目描述、作者、是否安装vue-router(这里选择Y,后面需要用到)、ESLint等,看自己情况选择输入咯。
现在他会自动帮你npm install
安装项目需要的模块,如果你的版本没有自动安装的话,没有关系,我们切换到项目目录(如cd testadmin
)。执行
npm install
如果觉得半天没有反应,是因为 npm
要安装的包都是国外服务器上的,把npm
资源镜像改到淘宝镜像
即可。
npm 镜像地址配置
1、得到原本的镜像地址
npm get registry
> https://registry.npmjs.org/
2、设成淘宝的
npm config set registry http://registry.npm.taobao.org/
> yarn config set registry http://registry.npm.taobao.org/
3、换成原来的
npm config set registry https://registry.npmjs.org/
ok, 这时候运行npm run dev
即可看到初始化后的项目了。
npm run dev
项目目录结构预览,以及package.json解析。
下面我们来集成Element UI,搭建框架。
VUE + Element UI
安装并引入
同样我们在项目的根目录安装Element UI
npm i element-ui -S
然后我们打开修改/src/main.js文件,引入element-ui
。
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 = falsenew Vue({el: '#app',router,render: h => h(App)
});
Container 布局组件
在src目录下,新建page文件夹(作为所有业务页面目录),然后在page下面新建layout.vue(作为框架结构文件)。
然后在layout.vue用运用Element UI Container 布局容器组件。
Container,用于布局的容器组件,方便快速搭建页面的基本结构:
<el-container>
:外层容器。当子元素中包含 <el-header>
或 <el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列。
<el-header>
:顶栏容器。
<el-aside>
:侧边栏容器。
<el-main>
:主要区域容器。
然后修改路由/src/router/index.js
文件
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Layout',component: Layout}]
})
启动服务(npm run dev
)预览(如果之前已经启动,就不用了,集成了webpack支持热更新)。
NavMenu 导航菜单 组件
直接复制下图里面的代码,到layout.vue,<el-header>
、<el-aside>
位置,然后微调样式即可。
预览:
但是会发现一个问题,下方有很大一部分空白区域,理论上,下方应该是沾满的,不会有任何空白的地方,这时候我们需要修改一样样式,来满足这个需求。
修改/src/page/layout.vue
里面的样式:
.el-container{position: absolute; width: 100%; top: 0px ; left: 0 ; bottom: 0;
}
.el-header{padding: 0;z-index: 1000;
}// header菜单需要靠右的添加.fr即可(如:<el-menu-item class="fr" index="3">消息中心</el-menu-item>)
.el-header .fr{float: right;
}
.el-header .el-menu{border-bottom: none;
}
.el-aside, .el-main{padding-top: 60px;
}
.el-aside{background: #545c64;
}
.el-aside .el-menu{border-right: none;
}
然后在/src/App.vue
里面添加样式:
*{padding: 0;margin: 0;
}
html,body{width: 100%;height: 100%;
}
#app {height: 100%;
}
Vue Router 嵌套路由
接下来,<el-main>
肯定是所有其它页面的展示区域,这里涉及到一个知识点:Vue 嵌套路由。
举例:当前我们的路由是localhost:8080
,打开的是layout.vue文件,如果路由改成localhost:8080/main
,需要打开main.vue的内容,如果路由改成localhost:8080/user
,需要打开user.vue的内容...怎么实现这个功能了?
Vue 嵌套路由来帮我们解决这个问题!
我们先在page目录下面新建2个文件main.vue
、user.vue
。
main.vue
<template><div id="main"><h2>我这里是首页</h2><router-link to="/user">前往用户中心</router-link></div>
</template><script>
export default {name: 'main'
}
</script>
user.vue
<template><div id="user"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>用户中心</el-breadcrumb-item></el-breadcrumb><h2>用户中心</h2></div>
</template><script>
export default {name: 'User'
}
</script>
然后重点来了,嵌套路由。
修改/src/router/index.js
路由文件:
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'
import Main from '@/page/main'
import User from '@/page/user'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Layout',component: Layout,// 嵌套路由children: [{// 这里不设置值,是把main作为默认页面path: '/', name: 'Main',component: Main},{path: '/user',name: 'User',component: User}]}]
})
同时在'/src/page/layout.vue'里面的<el-main>
里面添加<router-view/>
:
...
<el-main><router-view/></el-main>
...
效果预览:
推荐一些开源的基于 Vue 的项目
1、Sing App Vue Dashboard ( github: https://github.com/flatlogic/sing-app-vue-dashboard )
这是基于最新 Vue 和 Bootstrap 免费和开源的管理模板,其实跟咱们国内的 vue-admin-template 差不多。咱们不一定要使用它,但可以研究学习源码,相信可以学到很多实用的技巧,
2、vue-compnay-template (github: https://gitee.com/Wjhsmart/vue-compnay-template)
vue实现的通用企业官网模板,整合了jquery,bootstarp,iview,可快速体验地址:http://tessai.cn
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架相关推荐
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 从零开始搭建vue2.0+elementUi 后台管理系统 一项目搭建
文章目录 前言 一.全局安装vue-cli 二.创建vue项目 1.用命令来创建vue项目 三.运行项目 1.项目目录解读 一.项目全局引入element ui 总结 写文初衷 前言 在开始之前,首先 ...
- Element ui后台管理系统界面设计
自己学了一点Element ui前端框架,然后尝试设计了几个页面,仅供学习参考!
- 【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录 一.本地存储 1.概念 2.接口 3.实际操作 二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项 三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
- Vue +Element UI后台管理模板搭建示例
2019独角兽企业重金招聘Python工程师标准>>> 一.蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vu ...
- 2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目 一.Vue项目搭建 二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
- Vue快速入门(下)
文章目录 Vue快速入门(下)(应急用) 八.使用Axios实现异步通信(重点) 8.1 什么是Axios 8.2 第一个Axios应用程序 九.表单输入绑定 十.组件基础 十一.Vue-cli搭建d ...
- Vue入门 - 环境搭建Vue项目创建
Vue起步:从零开始搭建一个完整的Vue项目 一.安装Node环境 1.下载Node.js安装包并安装 2.环境变量的配置 二.搭建vue项目环境 一.安装Node环境 1.下载Node.js安装包并 ...
- b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
目录 本文中修改的原代码中的BUG: 修改方法: 本文案例代码仍有的BUG:(欢迎大家献计献策) 目标效果: 悦音player案例--效果展示视频: 更换的新接口/参数: 1.歌曲搜索接口:https ...
最新文章
- 安装旧版本插件_iOS 应用降级插件,支持任意版本升降
- CF1444C Team-Building(可持久化并查集)(二分图)
- java maven部署_eclipse中maven项目部署到tomcat
- 蓝桥杯第六届省赛JAVA真题----打印菱形
- UI素材干货模板|插画动效工作区域多个动画对象和6个动画场景
- java三目表达式_史上最强《Java 开发手册》泰山版王者归来
- 时间序列分析(2)| ARMA模型的(偏)自相关函数
- 微软6月补丁日修复7个0day:6个已遭利用且其中1个是为 APT 服务的商用exploit
- Android 实现 相机、相册功能 + 图片存取数据库操作
- SpringBoot两种定时任务(Spring Schedule 与 Quartz 整合 )实现
- Gitlab项目迁移
- Echarts中使用china.js
- CuteFtpnbsp;Pro之站点导入导出
- word中域代码与题注的结合实现自动编号和超简便交叉引用
- 矢量导数——角速度与矢量的叉乘
- uniapp扫描二维码问题
- 股票涨停是什么意思呀?股市中股票涨停是什么意思?
- Python学习周记(序列)
- 英语学习-综合英语(1)
- 力扣—— 19. 删除链表的倒数第 N 个结点(java)、剑指 Offer 22. 链表中倒数第k个节点(java)
热门文章
- attr和prop区别
- Standard Driver Routines(标准驱动程序)
- 为SharePoint Services (SPS)设置文件图标
- python3 列表相关操作
- Druid的外网访问异常
- linux sftp密码错误,linux个别用户sftp坏掉,验证密码后卡住, 大概是什么问题?...
- java mac pos_pos终端mac国密(sm4)算法(java实现)
- java中的STL库_C++11 STL线程库实现一个简单的线程池
- JSON数据、字符串拼接、宽字符处理、数组、Notice警告、isset和empty、变量、作用域、常量、include和require
- MySQL表结构管理