vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容。比如阿里云、七牛云、头条号、百家号等等,他们的管理系统都是这样的。
从零开始搭建 VUE + Element UI后台管理系统框架
现在我们从零开始,给小伙伴们讲讲如何来搭建这样的一个前端页面框架,主要用到 VUE + Element UI。
生成项目
用Vue脚手架初始化一个基于 webpack 模板的新项目
vue init webpack testadmin
从零开始搭建 VUE + Element UI后台管理系统框架
一路向下,会提示你项目名称、项目描述、作者、是否安装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
从零开始搭建 VUE + Element UI后台管理系统框架
项目目录结构预览,以及package.json解析。
从零开始搭建 VUE + Element UI后台管理系统框架
下面我们来集成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 布局容器组件。
从零开始搭建 VUE + Element UI后台管理系统框架
Container,用于布局的容器组件,方便快速搭建页面的基本结构:
:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。
:顶栏容器。 :侧边栏容器。 :主要区域容器。
从零开始搭建 VUE + Element UI后台管理系统框架
然后修改路由/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支持热更新)。
从零开始搭建 VUE + Element UI后台管理系统框架
NavMenu 导航菜单 组件
直接复制下图里面的代码,到layout.vue,、位置,然后微调样式即可。
从零开始搭建 VUE + Element UI后台管理系统框架
预览:
从零开始搭建 VUE + Element UI后台管理系统框架
但是会发现一个问题,下方有很大一部分空白区域,理论上,下方应该是沾满的,不会有任何空白的地方,这时候我们需要修改一样样式,来满足这个需求。
修改/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-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 + Element UI后台管理系统框架
Vue Router 嵌套路由
接下来,肯定是所有其它页面的展示区域,这里涉及到一个知识点:Vue 嵌套路由。
举例:当前我们的路由是localhost:8080,打开的是layout.vue文件,如果路由改成localhost:8080/main,需要打开main.vue的内容,如果路由改成localhost:8080/user,需要打开user.vue的内容…怎么实现这个功能了?
Vue 嵌套路由来帮我们解决这个问题!
我们先在page目录下面新建2个文件main.vue、user.vue。
main.vue
我这里是首页
前往用户中心
user.vue
首页用户中心
用户中心
然后重点来了,嵌套路由。
修改/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'里面的里面添加:
......
效果预览:
从零开始搭建 VUE + Element UI后台管理系统框架
是不是还意犹未尽了?其实到这里已经结束了。希望能给刚刚入门或者还在学习的小伙伴带来帮助,如果觉得文章看起来不是很好的,可以在评论取评论,看大家的评论情况,推出视频教程。
公告
喜欢小编的点击关注,了解更多知识!
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...相关推荐
- vue动态发布到线上_从零开始搭建vue移动端项目到上线
先来看一波效果图 初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack mypro ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目 一.Vue项目搭建 二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
- vue v-if判断数组元素的值_我对Vue项目上线做的一些基本优化
前言 大家好啊,我是wangly19,一名前端摸鱼小能手.最近忙着开源项目的东西,还有公司项目的迭代问题,导致更新文章的频率有点低了.也来聊聊我在干嘛吧. 第一个事情就是比较我的阉割版UI Desig ...
- ios swift请求框架_使用Swift在iOS中创建二进制框架
ios swift请求框架 We all use a lot of frameworks in our daily development routine. We just type the magi ...
- vue 回车查询 按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...
- python vector 初始化_从零开始搭建机器学习算法框架(python)--计算框架
介绍 今天开始一个新的系列,这个系列的目标是用python在不使用任何第三方库的情况下去实现各类机器学习或者深度学习的算法.之所以会有这种想法是因为每当我想提高编程技巧的时候,我总希望能够做一些简单又 ...
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
- 如何搭建python框架_从零开始:写一个简单的Python框架
原标题:从零开始:写一个简单的Python框架 Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 你为什么想搭建一个Web框架?我想有下面几个原因: 有一个 ...
最新文章
- 进来进程有人问表空间的迁移问题
- sql join on 多表连接_SQL 多表查询-交叉连接(笛卡尔积)
- 真正的Google搜索
- java script中定义的var变量怎么在body中使用,深入分析JavaScriptvar中的预解析与副作用...
- Mysql 零距离-入门(三)数据类型
- 計算機二級-java05
- DRUID连接池的使用
- 浙大计算机学院绩点,浙江大学学分制管理暂行规定-浙江大学本科生院.doc
- IEEE Spectrum:这些小机器人又好玩又实用,适合过年带回家
- 计算机应用基础课程思政方案,课程思政《计算机应用基础》教学设计.pdf
- layui form.js select的扩展插件(转自Author:@贤心)
- 阿里巴巴达摩院夺得首届“马栏山杯”国际音视频算法优化大赛【画质损伤修复赛道】冠军
- android 支付宝 40247,iOS——集成支付宝 系统繁忙,请稍后再试ALI40247
- 一篇关于营销的功能需求分析
- python实现指纹识别毕业论文_(完整版)指纹识别系统本科毕业论文
- 如何入门网络安全有什么条件呢?持有NISP或CISP证书可敲门
- Excel将多行文本合并一行:phonetic函数
- ubuntu查看cudnn是否安装成功_查看cudnn是否安装
- 计算机毕业设计教学资源网站的设计与实现
- #2.3数理比较与分析