前言
vue-win10-admin
- 这可能是目前惟一一个用Vue+Koa构建较为残缺windows10格调的开源前后端集成的管理系统(成果如下图)
- 前端 Vue + Vuex + Vue-Router + Element+UI
- 后端 Node + koa2 + Sequelize
- 数据库 mysql
【vue-koa2全栈撸win10格调管理系统】交个敌人系列文章，带各位全栈撸win10格调管理系统开发，当然我的项目也参考很多优良的前后端我的项目构建计划（比方vue-element-admin、win10ui、winadmin、BBS_node）和我在工作中的一些中的一些教训利用，次要是交个敌人的心态，如果你对这个我的项目有趣味，也心愿你的退出一起欠缺保护这个我的项目，let go~~~
残缺我的项目地址：vue-win10-admin
本篇文章是【vue-koa2全栈撸win10格调管理系统】交个敌人系列（1）-根底阶段，次要讲述：我的项目框架搭建思维
一、目前我的项目状况
| 序号 | 性能 | 性能 | 形容 |
|---|---|---|---|
| 0 | 前端零碎性能 | 开发中 | 仪表盘工作台、剖析页面、主题设置 |
| 1 | 前端零碎UI | 已实现 | win10格调桌面零碎：仿开始菜单、快捷菜单、任务栏、音讯、反对窗口大小拖动（有小bug待修复） |
| 2 | 前端性能 | 已实现 | (1)登录、动静菜单和权限生成 (2)零碎设置：权限设置、角色设置、用户设置、系统日志 (3)平台治理：桌面背景设置 |
| 3 | 后端 | 已实现 | 跨域解决、token 对立拦挡、权限拦挡、路由合并、根本实现相干性能的API开发 |
二、我的项目瞻望
Vue3公布后会思考同步更新，TS重写，mock数据的搭建，更多其余乏味的性能开发~
二、我的项目技术架构
毛糙画了个技术栈图，大略意思一下
三、我的项目搭建
（0）我的项目初始化
开发环境: 装置node+mysql,我的项目框架是由vue-cli构建的
编译器:Visual Studio Code(集体习惯,其余也可)
数据库可视化工具:Navicat for MySQL(集体习惯,其余也可)
接口调试工具:Postman(集体习惯,其余也可)
（1）我的项目目录
├── public // 我的项目前端html模板├── server // 服务端源代码│ ├── config // 服务端根底配置│ │ ├── config.js // 数据库信息配置和密钥│ │ ├── db.js // 配置Sequelize的数据库链接│ ├── controllers // 控制器│ ├── module // 数据表模型│ ├── routes // 服务端路由│ ├── utils // 服务端封装的根底工具│ ├── validate // 服务端申请参数校验文件│ ├── app.js // 服务端启动文件├── src // 前端源代码│ ├── api // 前端所有申请│ ├── assets // 前端主题 字体等动态资源│ ├── components // 前端全局专用组件│ ├── dictionary // 前端字典│ ├── filtres // 前端全局 filter│ ├── layout // 前端根底公共布局│ ├── mock // 前端我的项目mock 模仿数据│ ├── router // 前端路由│ ├── store // 前端全局 store治理│ ├── styles // 前端全局款式和字体图标│ ├── utils // 前端全局专用办法│ ├── views // 前端view│ ├── App.vue // 入口页面│ ├── main.js // 入口 加载组件 初始化等│ ├── permission.js // 权限治理│ └── settings.js // 根底设置├── .env.development // 开发环境全局变量配置├── .env.prod // 生产环境全局变量配置├── .env.test // 测试环境全局变量配置├── babel.config.js // babel 配置项├── package.json // package.json├── .gitignore // git 疏忽项└── vue.config.js // vue配置文件（2）我的项目运行介绍
咱们看到 package.json文件
"scripts": { "dev": "vue-cli-service serve", "server": "nodemon server/app", "start": "concurrently -k \"npm run server\" \"npm run dev\"", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },dev 是启动前端我的项目，不便独自开发前端
server 是启动服务端，不便独自开发服务端
start 是同时启动服务端和前端服务
值得一提是这里用了同时启动服务端和前端服务的计划
用concurrently插件，这样能够让npm script命令同时开启多个监听服务，而且如果一个过程服务失败，其余过程服务依然持续运行，甚至不会留神到其中的区别，赞~
（3）我的项目启动
步骤一、创立一个空的mysql数据库（如：db_win），能够间接导入创立数据库和数据, 在'server/mysql/db_win.sql'步骤二、在
server/config/config.js批改相干数据库配置
const config = { // 启动端口 port: 3000, //秘钥 secret:'win10', // 数据库配置 database: { dbName: 'db_win', host: 'localhost', port: 3306, user: 'root', password: '123456@cao', timezone: '+08:00' }}module.exports = config登录账号：root, 明码:root (数据库存的明码进行了md5加密)
接下来就能够欢快的游玩了~
三、总结
【vue-koa2全栈撸win10格调管理系统】交个敌人系列（1）-根底阶段，次要讲述：我的项目框架搭建思维和我的项目运行相干的配置。目前曾经开发完一个根底我的项目，接下来【vue-koa2全栈撸win10格调管理系统】交个敌人系列文章，会依据我的项目搭建和讲性能点实现，欢送大家一起交换~