关键词:
前言
之前有些过移动端的项目搭建的文章,感觉不写个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项目搭建配置
上面只是简单的完成了项目的初始化,接下来将按照下面的步骤来完成项目的配置
- 相关三方插件的引入(vuex、axios、element-ui、sass)
- 项目的基本配置文件配置
- 路由管理模块vue-router及菜单权限的配置
- 状态管理模块vuex的配置
- 请求模块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用于封装公共请求方法,详细请看代码
从零开始使用vite+vue3+pinia+naiveui搭建简单后台管理系统
参考技术A打开vite.config.js文件,引入组件然后在plugins内添加配置这里naiveui使用的是按需自动引入,具体可参考官方文档:按需引入(TreeShaking)-NaiveUI笔者添加了一些打包的配置,不需要可以忽略。配置完成后的样子:在src目录... 查看详情
使用vuejs2.0和element-ui搭建的一个后台管理界面
说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面。相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用、灵活、高效。 element-ui:一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库。 ... 查看详情
使用vuejs2.0和element-ui搭建的一个后台管理界面
说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面。 相关技术: vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。 element-ui:基于vuejs2.0的ui组件库。 vue-router:一般单页面应... 查看详情
vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)
...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)--- 查看详情
vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)
...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)--- 查看详情
vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)
...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)- 查看详情
vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)
...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)- 查看详情
从零开始的vue后台管理-连接数据库
参考技术A首先现在vue项目里面找到config这个文件,配置里面的index.js然后再配置生产环境的参数,也就是dev.env.js最后在prod.env.js里面配置给config/index.js里面的内容做个注释我在src里面创建了一个文件夹axios,api.js是我封装axios方... 查看详情
从零开始搭建vue项目
前言: 此样板面向大型,严肃的项目,并假定您对Webpack和vue-loader有些熟悉。请务必阅读vue-loader的常见工作流配方的文档。如果您只想尝试vue-loader或者鞭打一个快速原型,请改用webpack-simple模板。快速开始: &nb... 查看详情
从零搭建java后台管理系统mysql和redis安装
接上篇开始安装mysql和redis注意了,如果用阿里云服务器,外网访问的端口必须在安全组开启,否则外网访问不通三、服务器安装redis和mysql本次环境搭建将所有第三方服务会安装在阿里云服务器上jdk使用java8,对jdk的安装就不做... 查看详情
从零搭建java后台管理系统
框架搭建一、初步设想,使用springboot,框架打算用到依赖springweb,devTools,mysql,Aspect,Redis,Lombok,Freemark,Shiro,Rabbitmq,MyBatis登录start.spring.io自动生成springboot项目,把能加的依赖都加进来生成目录结构如下之后再添加些必要... 查看详情
从零开始搭建公司后台技术栈(代码片段)
点击上方关注“终端研发部”设为“星标”,和你一起掌握更多数据库知识有点眼晕,以下只是我们会用到的一些语言的合集,而且只是语言层面的一部分,就整个后台技术栈来说,这只是一个开始,从语... 查看详情
vue-用vue-cli从零开始搭建一个vue项目(代码片段)
...过多的关注DOM,只需要将数据组织好即可。本文用Vue-cli从零开始搭建一个Vue项目。准备工作1、下载安装Node 查看详情
从零开始搭建创业公司后台技术栈
点击上方“朱小厮的博客”,选择“设为星标”后台回复"书",获取后台回复“k8s”,可领取k8s资料- 前言 -说到后台技术栈,脑海中是不是浮现的是这样一幅图?图1有点眼晕,以下只是我们会... 查看详情
vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇1(代码片段)
...主题讲述了vue+element-uiJYAdmin后台管理系统模板-集成方案,从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板,还是一套企业级后台系统开发集成方案,致力于打造一个与时俱进、高效易懂、... 查看详情
从零开始搭建django前后端分离项目系列一(技术选型)
前言最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析、报表数据查询、GIS地理化展示、任务监控管理。由于页面功能较复杂,所以采用前后端分离... 查看详情
从零开始利用vue-cli搭建简单音乐网站
最近在学习vue框架,练习了一些例子之后,想着搭建一个vue项目,了解到官方有提供一个vue-cli工具来搭建项目脚手架,尝试了一下,写下博客来记录一下。一、工具环境1、node.js6.10.0,目前node.js最新版本是8.7.0,可以到官网下载... 查看详情
vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇2(代码片段)
...配置) vue+element-uiJYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效 查看详情