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

关键词：

前言

之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的后台配置模板（vue-element-admin），页面也挺美的，但是还是碍于不想看太多关于这个模板的配置说明，于是又拉出来之前我搭建的简易版的模板，决定重构下，使用自己搭建的后台系统模板，配置非常简单；本文将从初始化项目开始一直到打包上线做一个详细的介绍，看完本文章，绝对会对其中的一些配置非常熟悉，用起来也更加顺手；项目github地址：https://github.com/MrKaKaluote/element-admin.git，感觉好用的，感谢给个小星星。

初始化项目

1、当前开发环境

node.js -v  v8.9.3

npm -v 6.1.0

yarn -v 1.7.0

Vue -v 2.5.2

全局安装vue-cli vue

2、新建文件夹，在文件下初始化项目

vue init webpack vue-elementui（项目名称）

同样一路回车如下

这里取消了ESLint代码风格检查工具以及单元测试模块，当然也可以选择保留

依赖包管理工具选择了yarn（yarn可以缓存之前下载的模块，可以提高模块加载的速度）

默认选择了vue-router模块

然后回车，下载以来模块

结束之后如上图所示，cd进入项目，然后npm run dev，项目就可以跑起来了，在浏览器中输入localhost:8080即可打开项目

项目初始化完毕，下面来正式开始管理后端的项目搭建

admin项目搭建配置

上面只是简单的完成了项目的初始化，接下来将按照下面的步骤来完成项目的配置

1. 相关三方插件的引入（vuex、axios、element-ui、sass）
2. 项目的基本配置文件配置
3. 路由管理模块vue-router及菜单权限的配置
4. 状态管理模块vuex的配置
5. 请求模块axios的配置

1、相关三方插件的引入（vuex、axios、element-ui、sass）

既然选择了vue全家桶的技术栈，稍大型的项目vuex是肯定要用到的，同时axios必不可少，element-ui（当然还有其它ui框架可以选择，比如说bootscrap）、采用sass样式预处理框架，下面就安装下以上插件

yarn add vuex axios element-ui font-awesome--save

yarn add node-sass  -D

yarn add sass-loader -D

yarn add style-loader -D

以上几行代码用于下载依赖包，安装完成之后，package.json文件如下

sass相关插件放在开发环境下面

在main.js中引入相关插件

上面是各三方插件的引入及注册，状态及路由的配置稍后会详细说明

2、基础配置文件的配置

这里刚一开始要修改的东西不多，暂且只修改以下两处

（1）配置favicon.ico

要配置出自己的框架，一些基础的配置文件还是要修改的，先来说个最简单的好了

拿百度来说，先把标签上的图表弄出来，这个配置要去修改buld ==> webpack.base.conf.js文件

在webpack.base.conf.js文件中引入html-webpack-plugin组件，这个模块可以为html文件中引入的外部资源，我们使用它来添加图标，代码如下

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) //为html文件中引入的外部资源

// 配置在module.exports里面
plugins: [
  new HtmlWebpackPlugin(
     template: ‘index.html‘,
     favicon: ‘favicon.ico‘,
     inject: true
   )
 ],

将图标生成的favicon.ico文件放在根目录下即可，如何生成favicon.ico请自行百度，很简单

（2）请求的代理

现在还没有配置请求模块axios，配置好了之后请求接口会遇到跨域问题，修改config ==>index.js里面的proxyTable，可配置跨域代理。代码如下

proxyTable: 
    ‘/api/‘:     // api为代理接口
          target: ‘http://localhost:8085/‘,    // 这里我代理到本地服务
          changeOrigin: true
     
,

目前基础的配置先修改这两处，如有其它修改的地方在下面会提到，接下来配置项目三大模块（router、axios、vuex）

配置router及菜单权限

在我看来，一个项目最基础的模块就属于路由的配置了，路由不通，页面无法跳转，一切都是浮云，下面就通过路由配置来搭建起项目的基本样子。

在src目录下面新建以下目录和菜单

新建以上文件及文件夹，作用已在上面做标注，重点来说下router.js和home.vue的配置

（1）router.js

首先要保证所有的子页面跳转都在home页面的框架下，路由配置如下

    path: ‘/menu1‘,
    component: home,
    name: ‘菜單一‘,
    iconCls: ‘el-icon-message‘, //图标样式class
    children: [
      
        path: ‘sub1‘,
        component: sub11,
        name: ‘子菜單一‘
      ,
      
        path: ‘sub2‘,
        component: sub12,
        name: ‘子菜單二‘
      
    ]
  ,
  
    path: ‘/menu2‘,
    component: home,
    name: ‘菜單二‘,
    iconCls: ‘el-icon-message‘,
    children: [
      
        path: ‘sub1‘,
        component: sub21,
        name: ‘配置管理‘
      
    ]
  

所有的父组件都为home组件，这样就可以保证子页面的跳转都在home的框架下，详细的配置请看我项目中的配置

（2）home.vue

home组件中的菜单配置是根据路由遍历出来的，如下代码

<!--导航菜单-->
<aside :class="‘menu-expanded‘">
  　<el-menu :default-active="$route.path" ref="bigmenu" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" unique-opened router>
        <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden && checkContains(item.name)">
           <el-submenu :index="index+‘‘" v-if="!item.single">
             <template slot="title"><i :class="item.iconCls"></i>item.name</template>
             <el-menu-item v-for="child in item.children" @click="addRouter(child, item.path +‘/‘+ child.path)" :index="item.path +‘/‘+ child.path" :key="item.path +‘/‘+ child.path" v-if="!child.hidden && checkContains(child.name)">child.name</el-menu-item>
           </el-submenu>
           <router-link v-else v-for="child in item.children" :index="child.path" :key="child.path" :to="child.path">
              <div @click="addRouter(child)" class="single-menu">child.name</div>
           </router-link>
         </template>
    </el-menu>
 </aside>

checkContains方法用来检测后台给的树结构中是否包含此节点，这里用来进行权限控制，同样的，项目代码里都有清晰的注释，可看源码

状态管理模块vuex的配置

状态管理的配置同我之前写的移动端的一样

在src目录下新建store文件夹，如下图

在main.js中引入store/index.js，然后全局注册即可使用，详细请看代码

请求模块axios的配置

请求模块的封装也和之前写的移动端的配置一样

在src目录下新建api和config目录

common.js用于封装请求api

index.js用于封装公共请求方法，详细请看代码

文章内容来源：http://www.cnblogs.com/gaosong-shuhong/p/10119819.html

vue客户端项目的基本搭建以及elementui(代码片段)

1.客户端项目搭建1.1创建项目目录（安装时路由选y）cdE:vue_projectenranvueinitwebpackrenran_pc之后用pycharm打开项目1.2初始化项目清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认css样式,以及index.js中默认导入的HelloWorld  ... 查看详情

vue+elementui搭建后台管理界面(3侧边栏菜单)(代码片段)

上一节搭好了主框架，但是标签页和侧边栏只是分别展示了各自的菜单，如何将二者联动起来？定义路由规则：当有children属性时，从children里取出path填充到侧边栏，如：path:‘/‘,redirect:‘/dashboard‘,name:‘Container‘,component:Contai... 查看详情

前端vue+elementui案例：通用后台管理系统-项目总结(代码片段)

...ff0c;前端面试，前端面试项目案例链接【前端】Vue+ElementUI案例：通用后台管理系统-导航栏（视频p1-16）https://blog.csdn.net/karshey/article/details/127640658【前端】Vue+ElementUI案例：通用后台管理系统-Header+导航... 查看详情

vue+elementui：搭建开发环境(代码片段)

...安装Yarn七、创建&启动项目饿了么提供的UI框架：ElementUI一、环境准备NodeJS（npm）Hbuilder或者VisualStudioCode（前端IDE）环境安装二、安装NodeJs下载地址： 查看详情

18-vue之elementui安装(代码片段)

目录安装ElementUI使用ElementUI第一个demo安装ElementUI创建vue项目，参考：17-Vue项目搭建_小白的博客-CSDN博客项目目录下使用命令：npmielement-ui-S使用ElementUI在main.js里面添加如下三行内容//引入elementuiimportElementUIfrom'element... 查看详情

vue+elementui+baidu地图项目模板(代码片段)

Vue项目构建:Vue+Vue-Route+Vuex+Element-UI+Axios+百度地图项目后台模板Vue项目创建：#创建一个基于webpack模板的新项目vueinitwebpackC:\\node_workspace\\sb-map#切换至项目路径cdC:\\node_workspace\\sb-map#安装项目依赖文件cnpmin 查看详情

前端vue+elementui案例：通用后台管理系统-代码总结(代码片段)

文章目录前言项目文件目录apimockServehome.jspermission.jsindex.jsmock.jsuser.jsassertcomponentsCommonAside.vueCommonHeader.vueCommonTags.vuedataechartsDataorder.jsuser.jsvideo.jsmockDatatableData.jsuserData.jsvide 查看详情

精通系列）(代码片段)

Java之SpringBoot+Vue+ElementUI前后端分离项目（上-项目搭建）Java之SpringBoot+Vue+ElementUI前后端分离项目（中-功能完善-实现查询）Java之SpringBoot+Vue+ElementUI前后端分离项目（下-功能完善-发布文章 查看详情

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

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

前端vue+elementui案例：通用后台管理系统-登陆不同用户显示不同菜单动态添加路由(代码片段)

...ff0c;前端面试，前端面试项目案例链接【前端】Vue+ElementUI案例：通用后台管理系统-导航栏（视频p 查看详情

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

...ue2、新建文件夹，在文件下初始化项目vueinitwebpack vue-elementui（项目名称）同样一路回车如下这里取消了ESLint代码风格检查工具以及单元测试模块，当然也可以选择保留依赖包管理工具选择了yarn（yarn可以缓存之前下载的模块... 查看详情

vue/cli手脚架搭建项目(代码片段)

1.什么是ElementUI:Element，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库. 2.搭建环境:步骤一:通过vue-cli创建项目      vuecreate项目名步骤二:手动选择功能(Manuallyselectfeatures)步骤三:选择需... 查看详情

vue整合elementui搭建项目

2 查看详情

laravel9+vue+elementui快速搭建后台管理系统

项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情

基于vue+less+axios封装+elementui搭建项目底层支撑实战(代码片段)

...安装4.axios请求的封装与拆解 5.axios请求封装后的验证 6.ElementUI的安装、验证三、本项目进展图例介绍1.内容架构2.代码目录四、读完本小节需要思考的几个问题一、本节介绍和上节回顾1.上节介绍上一节，我们基于Vue技术栈&#... 查看详情

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

  项目搭建时间：2020-06-29本章节：讲述基于vue/cli，项目的基础搭建。本主题讲述了vue+element-uiJYAdmin后台管理系统模板-集成方案,从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板，... 查看详情

php语言laravel9+vue+elementui后台管理搭建教程

项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情

前端vue+elementui案例：通用后台管理系统-导航栏(代码片段)

文章目录目标代码0.数据1.其他准备2.结构3.动态显示数据4.主题：背景色，点击悬停效果5.去除padding6.去除下拉框7.标题8.路由跳转总代码组件CommonAside.vue文件结构参考目标悬停效果点击效果其他：点击展开和收缩动态... 查看详情