正文

vue+element搭建后台管理系统(代码片段)

xifengxiaoma  xifengxiaoma  2022-12-25  231

关键词：

导入项目

打开 Visual Studio Code，File --> add Folder to Workspace，导入我们的项目。

技术分享图片

安装 Element

安装依赖

Element 是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了 vue、react、angular 等多个版本，我们这里使用 vue 版本来搭建我们的界面。

访问：http://element-cn.eleme.io/#/zh-CN/component/installation ，官方指南，包含框架的安装，组件的使用等的全方位的教程。

技术分享图片

按照安装指南，我们选择 npm 的安装方式。我们使用 Yarn ，可以用 yarn add element-ui 命令替代。

技术分享图片

项目导入

按照安装指南，在 main.js 中引入 element，引入之后，main.js 内容如下：

技术分享图片

项目引入之后，我们在原有的 HelloWorld.vue 页面中加入一个 element 的按钮，测试一下。

Element 官网组件教程案例中，包含大量组件使用场景，直接复制组件代码到项目页面即可。

技术分享图片

HelloWorld.vue 页面加入一个测试按钮

技术分享图片

如下图所示，说明组件已经成功引入了。

技术分享图片

页面路由

添加页面

我们把 components 改名为 views，并在 views 目录下添加三个页面，Login.vue，Home.vue，404.vue。

三个页面内容简单相似，只有简单的页面标识，如登录页面是 “Login Page”。

<template>
  <div class="page">
    <h2>Login Page</h2>
  </div>
</template>

<script>
export default 
  name: ‘Login‘

</script>

配置路由

打开 router/index.js，添加三个路由，分别对应主页、登录和404页面。

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Login from ‘@/views/Login‘
import Home from ‘@/views/Home‘
import NotFound from ‘@/views/404‘

Vue.use(Router)

export default new Router(
  routes: [
    
      path: ‘/‘,
      name: ‘Home‘,
      component: Home
    ,
    
      path: ‘/login‘,
      name: ‘Login‘,
      component: Login
    
    ,
      path: ‘/404‘,
      name: ‘notFound‘,
      component: NotFound
    
  ]
)

浏览器重新访问下面不同路径，路由器会根据路径路由到相应的页面。

http://localhost:8080/#/，/ 路由到 Home Page。

技术分享图片

http://localhost:8080/#/login，/login 路由到 Login Page。

技术分享图片

http://localhost:8080/#/404，/404 路由到 404 Error Page。

技术分享图片

安装 SCSS

1.安装依赖

因为后续会用到 SCSS 编写页面样式，所以先安装好 SCSS。

yarn add sass-loader node-sass --dev

2.添加配置

在build文件夹下的webpack.base.conf.js的 rules 标签下添加配置。

    test: /.scss$/,
    loaders: [‘style‘, ‘css‘, ‘

3.如何使用

在页面代码 style 标签中把 lang 设置成 scss 即可。

<style lang="scss">

</style>

4.使用测试

丰富一下 404 页面内容，加入 scss 样式，移除 App.vue 的 logo 图片。

技术分享图片

访问：http://localhost:8080/#/404，正确显示修改后的 404 页面效果。

技术分享图片

安装 axios

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，我们后续需要用来发送 http 请求。

安装依赖

执行以下命令，安装 axios 依赖。

yarn add axios

安装完成后，修改 Home.vue 进行简单的安装测试。

技术分享图片

点击测试按钮触发 http 请求，并弹出窗显示返回数据。

技术分享图片

安装 Mock.js

为了模拟后台接口提供页面需要的数据，我们引入 Mock.js 为我们提供模拟数据，而不用依赖于后台接口的完成。

安装依赖

执行如下命令，安装依赖包。

yarn add mockjs --dev

安装完成之后，我们写个例子测试一下。

在 src 目录下新建一个 mock 目录，创建 mock.js，在里面我们模拟了两个接口，分别拦截用户和菜单的请求，并返回相应的数据。

如下图所示：

技术分享图片

修改 Home.vue，在页面放置两个按钮，分别触发用户和菜单的处理请求，成功后弹出获取结果。

技术分享图片

浏览器访问：http://localhost:8080/#/，分别点击两个按钮，mock 会根据请求 url 拦截对应请求并返回模拟数据。

获取用户信息

技术分享图片

获取菜单信息

技术分享图片

OK，mock 已经成功集成进来了。

vue+element搭建后台管理系统(代码片段)

组件封装为了避免组件代码的臃肿，这里对主要的功能部件进行封装，保证代码的模块化和简洁度。组件结构组件封装重构后，试图组件结构如下图所示代码一览Home组件被简化，包含导航、头部和主内容三个组件。Home.vue<templ... 查看详情

vue+element搭建后台管理系统(代码片段)

接口请求格式定义前台显示需要后台数据，我们这里先把前后端交互接口定义好，没有后台的时候，也方便用mock模拟。接口定义遵循几个规范：1.接口按功能模块划分。系统登录：登录相关接口用户管理：用户管理相关接口机构... 查看详情

vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇1(代码片段)

...cli，项目的基础搭建。本主题讲述了vue+element-uiJYAdmin后台管理系统模板-集成方案,从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板，还是一套企业级后台系统开发集成方案，致力于打造一... 查看详情

vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇2(代码片段)

...对应的接口（proxy多代理配置） vue+element-uiJYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效查看详情

vuejs和element搭建的一个后台管理界面(代码片段)

介绍：　　这是一个用vuejs2.0和element搭建的后台管理界面。相关技术：　　vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。　　element：基于vuejs2.0的ui组件库。　　vue-router：一般单页面应用spa... 查看详情

vue+elementui搭建后台项目(代码片段)

...言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的... 查看详情

vue2.0+element+node+webpack搭建的一个简单的后台管理界面(代码片段)

1.检查本地是否安装node：node-v 查看详情

从零开始搭建vue+element-ui后台管理系统项目到上线(代码片段)

vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)

封装一个ECharts组件的一点思路有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客。另外这里只展示关键部分代码，项目代码放在github上：mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui... 查看详情

vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)

vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)

封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这里只展示关键部分代码，项目代码放在github上：mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-u... 查看详情

vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)

用vue做网站后台(代码片段)

vue后台管理系统模板(代码片段)

推荐一些Vue常用后台管理系统模板前言Vue.js是一个目前比较流行的前端框架，已经到了前端人人都会的地步，今天这里为大家罗列一下基于Vue的后端管理的框架。目前比较流行和Vue搭配的UI组件有Element-UI、iview、Bootstrap-Vu... 查看详情

vue-element-admin后台管理系统(代码片段)

文章目录前言一、vue-element-admin是什么？二、使用步骤下载和部署浏览模板项目代码官网启动三.技术提炼1.vue全家桶都有什么2.vuex什么时候用文件，什么时候直接写vue页面导航守卫3.组件之间的通信4.请求/响应式拦截器5.vu... 查看详情

vue项目实战：电商后台管理系统（vue+vuerouter+axios+element）(代码片段)

目录电商后台管理系统1.功能开发模式技术选型登录用户管理权限管理角色列表权限列表商品管理商品列表分类参数商品分类订单管理数据统计2.技术问题登录功能保存token路由导航守卫控制访问权限退出功能通过axios请求拦截器... 查看详情

vue搭建后台项目(代码片段)

参考：https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.mdhttps://juejin.im/post/59097cd7a22b9d0065fb61d21、当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias了。//webpack.base.config.jsalias: 查看详情

vue3.0+ts+element-plus实现(若依版后台管理系统)(代码片段)

附上源码地址:Vue3.0+TS+Element-plus后台管理系统模板准备工作安装vue3.0，npmcreatevue3-project选中这几项即可，不需要vuex,我们自己封装状态管理。setup函数使用在.vue文件中,script标签下代码都必须带有lang=“ts”。关于se... 查看详情