前言这可能是目前唯一一个使用Vue+Koa构建一个比较完整的开源前后端一体化的windows10风格的管理系统（效果见下图）前端Vue+Vuex+Vue-Router+Element+UI后端Node+koa2+Sequelize数据库mysql【Vue+Koa2+Mysql全栈win10风格管理系统】交友系列文章，带大家开发全栈win10风格的管理系统，当然项目中也参考了很多优秀的前后端项目构建方案（比如vue-element-admin、win10ui、winadmin、BBS_node）和我工作中的一些心得，主要针对交朋友的心态。如果你对这个项目感兴趣，希望你加入我们一起完善和维护这个项目，放手~~~完整项目地址：vue-win10-admin####本文为【Vue+Koa2+Mysql全-stackwin10风格管理系统】交友系列（一）——基础阶段，主要讲述：项目框架搭建思路和项目搭建1.项目现状No.功能描述0前端系统功能开发Dashboard工作台、分析页面、主题设置1前端系统UI已完成Win10风格的桌面系统：仿开始菜单、快捷菜单、任务栏、Messages，支持窗口大小拖动（一个小bug待修复）2前端功能已完成（1）登录、动态菜单及权限生成（2）系统设置：权限设置、角色设置、用户设置、系统日志（3）平台管理：桌面后台设置3后台已完成跨域解析，统一token拦截，权限拦截on，路由合并，相关功能的API开发已经基本完成。搭建，还有更多其他有趣的功能开发~3.项目的技术结构大致画了一张技术栈图，大致意思是##4.项目搭建（0）项目初始化开发环境：安装node+mysql，以及项目framework是vue-cli搭建的编译器：VisualStudioCode（个人习惯，其他也可以）数据库可视化工具：NavicatforMySQL（个人习惯，其他也可以）界面调试工具：Postman（个人习惯，其他也可以）也可用）(1)项目目录├──public//项目前端html模板├──server//服务器源码│├──config//基本服务器配置││├──config.js//数据库信息配置和key││├──db.js//配置Sequelize数据库链接│├──controllers//Controllers│├──module//数据表模型│├──routes//服务端路由│├──utils//服务端打包的基本工具│├──validate//服务端请求参数验证文件│├──app.js//服务端启动file├──src//前端源码│├──api//所有前端请求│├──assets//前端主题字体等静态资源│├──components//前端全局公共组件│├──dictionary//前端字典│├──filterres//前端全局过滤器│├──layout//前端基础公共布局│├──mock//前端工程mock模拟数据│├──router//前端路由│├──store//前端全局store管理│├──styles//前端全局样式和字体图标│├──utils//前端-endglobalpublicmethods│├──views//前端视图│├──App.vue//入口页面│├──main.js//入口加载组件初始化等│├──permission.js//权限管理│└──settings.js//基础设置├──.env.development//开发环境全局变量配置├──.env.prod//生产环境全局变量配置├──.env.test//测试环境全局变量配置├──babel.config.js//babel配置项├──package.json//package.json├──.gitignore//gitignoreitem└──vue.config.js//vue配置文件（二）项目运行介绍我们看到package.json文件"scripts":{"dev":"vue-cli-serviceserve","server":"nodemonserver/app","start":"concurrently-k\"npmrunserver\"\"npmrundev\"","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint"},dev是启动前端项目，方便单独开发前端。服务值得一提的是，concurrently插件用于同时启动服务端和前端服务，这样npmscript命令可以同时启动多个监听服务，如果一个进程服务失败，其他进程服务会继续运行，即使没有你也会注意到区别，赞~（3）项目启动第1步，创建一个空的mysql数据库（如：db_win），可以直接导入创建数据库和数据，在'server/mysql/db_win.sql'第2步，在server/config/config.js修改相关数据库配置constconfig={//启动端口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加密)connect下来玩的开心~五、项目扩展1.添加新页面现在按照其他路由的格式在src/router/asyncRoutes.js文件中添加一个新页面。添加后使用管理员账号登录系统在设置-权限设置中添加权限。菜单的路径对应上面文件配置中的name字段，必须保持一致。2.增加新功能该功能附在菜单中。链接下面的功能界面3.添加或更新新的数据库表在server/model中对应添加一个数据库模型，根据模型自动创建表。模型搭建完成后，将如下这段代码放在server/config/db.js中发布代码，运行npmrunserver或npmrunstart，看到initdbok，说明数据库表已经更新了~//sequelize//.sync({alter:true})//.then(()=>{//console.log('initdbok')//})//.catch(err=>{//console.log('initdberror',err)//})三、添加函数接口六、总结【Vue+Koa2+Mysql全栈win10风格管理系统】交友系列（一）——基础阶段，主要讲：项目框架与项目运营相关的建设思路和配置。目前已经开发了一个基础项目，下一篇【Vue+Koa2+Mysql全栈Win10风格管理系统】交友系列文章将根据项目搭建和功能点来实现。欢迎交流~完整项目地址：vue-win10-行政
