后端接口地址配置

[!TIP]
如果是在开发环境那么直接修改 static/config/index.js 文件即可

[!TIP]
如果是在生产环境那么直接修改 static/config/index-prod.js 文件即可

开发环境启动

在webstorm顶部找到该 三角形 点击后会出现一个下拉框
10.png
在弹出的下拉框中点击 Edit confirations，在接下来弹出的页面中安装如下图所示操作
12.png
选择npm
13.png
填写启动的参数
14.png
在启动之前需要安装下依赖包，需要在该工程目录下执行命令: npm install , 由于npm安装比较慢，所以我们推荐使用cnpm来安装

点击甲壳虫图标即可实现debug模式启动
15.png
启动的过程中控制台会实时展示启动的进度
17.png
启动成功会打印访问的地址 http://localhost:8001/#/login，输入到浏览器中试试吧 默认登录用户名和密码都是 admin

打包部署

[!TIP]
在该工程的目录下执行: npm run build

45.png
46.png
出现上面日志表示打包成功，这个时候会在该目录下生成一个dist目录，dist目录中存储的便是该UI打包后的代码，打包后的代码中的css、js文件已经被压缩了，如果需要修改源代码，需要重新打包。
48.png
在dist/config/index.js 即可修改后端接口地址
49.png
将dist目录重命名为项目的名称todo，然后放入到 tomcat/webapps目录下，启动tomcat即可，在浏览器中输入： http://ip:tomcatPort/todo/index.html 即可访问前端页面。
dist目录下的内容也可以放入其他服务器中，比如: nginx。

菜单路由配置

假设你上面的代码都编写正确，也能够成功登录系统，但却无法访问待办事项页面，那是因为你还没有将菜单路由配置到页面中。
50.png

先创建一个待办事项目录
51.png

添加完毕后在待办事项目录下添加一个待办事项管理菜单
60.png

菜单路由的配置是其实是对应页面的路径，以views为根目录，当前系统中todo.vue 页面相对于views的路径为 todo/todo (不用填写.vue)，那么对应的菜单路由就为 todo/todo

添加成功后刷新页面看下吧
62.png

好了，到这里你应该对整个基础框架有个掌握了吧，当然系统的魔力不止于此，还有很多等你发现，有问题可以随时联系我们!