前面我们已经讲过了如何通过vue部署一下新的模块进行开发,已经有了web前端项目了,开始现在我们想快速实现admin后台控制台的前端界面,这个时候有两种方式; 第一种方式就是 ![](https://img.kancloud.cn/c3/40/c3400af1396121cbc9e898e7214647f6_1912x860.png) ![](https://img.kancloud.cn/9e/b0/9eb03a33fd2807514ed6472f394d6867_1230x570.png) ### 其实就是前面讲过的快速通过vue-cli生成vue项目 ### 第二种方式就是找到web已经有的项目 ![](https://img.kancloud.cn/50/92/50922268914d985102009aa54498cdb0_716x810.png) 选中上图当中的这些文件直接复制到admin当中去 ### ![](https://img.kancloud.cn/17/7e/177ee2ec8f5b16567f7426c639318817_754x774.png) 然后替换掉里面的web关键字 因为上一个项目的名称就是web 所以替换一下最好 ### 然后执行一下npm install ![](https://img.kancloud.cn/e8/89/e889d199cbddf333abf8e3101fc60591_938x256.png) ### 然后找到pacakge.json文件修改一下里面的端口号为9001 ### 接下来就是对admin后台控制台的界面进行改造了 ### 不废话了直接上图吧 1、因为后端控制台我们做的很简单没有登陆功能所以改造头部组件 ![](https://img.kancloud.cn/48/c3/48c3dfbf7a153c76ad1d6d4f76263557_1324x903.png) ![](https://img.kancloud.cn/41/5d/415dd9bc1b198c5c31189c2a8584bad1_1363x825.png) 如上图所示我们将乘车人管理改造为关于菜单,另外去掉了头部组件当中的store全局管理 因为我们不需要登陆不需要去全局当中拿数据了 ### 2、左侧菜单也做个修改 将以前的乘车人管理改造为关于菜单 ![](https://img.kancloud.cn/ca/27/ca275771ddfe0e52a461d4b3c78c39a2_1386x898.png) ### 3、admin当中的路由 ![](https://img.kancloud.cn/a2/1e/a21e8af3b990305347bddf4dcec5708f_1400x943.png) ![](https://img.kancloud.cn/39/82/398276c0118d0c51a447cf70c5bfebd2_1370x908.png) ### 4、增加一个关于组件 ![](https://img.kancloud.cn/12/f2/12f2833d375ea03878ec9c9372d94ec5_1303x841.png) ### 5、admin的main.js当中 ![](https://img.kancloud.cn/8a/62/8a627ceaae5e7197cf9e3133ae811a73_1369x949.png) ![](https://img.kancloud.cn/2e/57/2e5704e145dc4b40d741aa73da809e3e_1369x890.png) ### 6、admin控制台删除多余的组件 ![](https://img.kancloud.cn/d5/66/d566e283fce0f9f7a3a65cd291ce422e_455x462.png)