项目简介

这是一个简单的vue2 和 typescript 的后台管理模板。在使用Vue 的过程中，许多的同学和我一样希望有一个简单一点的模板，不需要太多的内容，懒得去删除那些不符合我们业务逻辑的部分。由于本人业务需求需要兼容ie10（该项目已经完成了ie10的兼容），所以使用vue2和ts 来构建一个管理后台的框架，里面只有一个登录和主页，主页实现了菜单的跳转，面包屑等，和一些基本的功能。
项目地址https://github.com/cll123456/vue2-ts-template.git
演示地址： http://chenliangliang.top:9012/Login
账号: 长度大于3小于50的字符串就可以如： admin
密码：不能为空，随便啥值

效果：

获取方式

git clone https://github.com/cll123456/vue2-ts-template.git 获取项目
npm install 安装对应的依赖包
npm run dev 启动开发环境
npm run build 打包成生产

项目技术栈

vue2 + typescript + elementui + router + axios + scss 等

包依赖简介

生成环境包

"dependencies": {"@babel/polyfill": "^7.12.1",  // 兼容ie10 的关键包，需要在main.ts的第一行导入哦"axios": "^0.21.1", // 获取网络请求"core-js": "^3.6.5",  // 核心js库"element-ui": "^2.15.1", // elementui 库"js-cookie": "^2.2.1", // 使用cookie 进行存储数据"normalize.css": "^8.0.1", // css 对项目的基本样式初始化"path-to-regexp": "^6.2.0",  // 将路径字符串（如/ user /：name）转换为正则表达式，匹配路由"style-resources-loader": "^1.4.1", // 对样式资源的加载器"vue": "^2.6.11", // 不介绍"vue-class-component": "^7.2.3", // vue 类组件库 必备"vue-property-decorator": "^9.1.2", // vue 类的装饰器"vue-router": "^3.2.0", // router"vue-svgicon": "^3.2.9", // 使用的图标"vuex": "^3.4.0", // 存储数据的vuex"vuex-module-decorators": "^1.0.1" // vuex 的类型检查},

开发环境包

不解释，基本上都是一些自带的包，然后安装一些预编译的包。eslint , ts, @types等

开发注意

图标

图标直接去阿里里面复制到对应的svg图标到，src -> icons->svg 即可，然后使用命令 npm run svg(这里已经配置好了对应的脚本启动) 会自动的全局导入图标

router

所有的路由都如果需要在菜单的右侧中显示，必须要要配置在layout组件的children中.
如：（详细请查看源码）

颜色变量

默认我全局导入了两个变量文件，一个是variable.scss, 另一个是 mixin.scss, 需要啥颜色直接改里面的$mianColor 和 subColor，包括可以定义elementui的主题颜色

表单验证

我也封装了一个表单验证器，可以直接在el-form-item 中的rule 导入对应的规则，即可，如：

菜单权限控制

因为没有后台支持，权限控制直接在matchRouteMenu 路由守卫进行匹配和存入数据即可

最后：

基础的架子已经搭建好，只适合一些需要兼容ie项目的vue应用。毕竟vue3 不兼容ie嘛！如果有用，请给一个小星星哦！

vue2-ts-template vue2后台管理系统模板相关推荐

开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！
原文链接:Vue3 后台管理系统模板推荐. 之前写了一篇关于 Vue2 的后台管理系统模板的推荐,详情请见 Vue后台管理系统模板推荐. Vue3 在今年2月份已成为新的默认版本,本文收集了一些 Vu ...
12个免费开源后台管理系统模板
当你写项目的时候,如何快速的完成一个项目的搭建,这个时候就需要借助到一些模板了,前端开发的一个好处就是,各类UI模板都是相当的齐全的,直接拿来用就可以了,脱离了一行又一行垒代码的繁琐的工作,以下的开源 ...
分享10 个开源免费且优秀的后台管理系统模板
分享10 个开源免费且优秀的后台管理系统模板. Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的 ...
vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程. ...
《特别推荐》10套精美的免费网站后台管理系统模板
大部分的 Web 应用和动态网站都需要一个后台管理系统用于管理前台界面的信息展示以及用户信息.管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,这样使用后台管理系统的人员 ...
后台管理系统模板 - zhadminvue
没事的时候写了一个后台管理系统模板:zhadminvue,欢迎大家提issue和PR,以及想要添加一些有意思的功能模块,在没事的时候我也会加进去~ github:https://github.com/ ...
10设置精美的免费网站后台管理系统模板
虽然转移.但好东西不应该是沉默原文地址:http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.ht ...
10套精美的免费网站后台管理系统模板
Admin Panel Template 这个后台管理模板的导航设计非常漂亮,头部还有未读的短消息和提醒的条数显示. 在线演示 PSD下载 HTML&CSS下载 Charisma ...
3YAdmin-专注通用权限控制与表单的后台管理系统模板
3YAdmin基于React+Antd构建.GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢? 一个后台管理系统的核心我认为应该是权限控制,表单以及 ...
element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...

vue2-ts-template vue2后台管理系统模板