前端项目框架开发过程
1. 前端入口main.js
main.js文件中的import router from ‘./router’ 会去到router/index文件下寻找路由
2. router路由入口index.js
对应关系:index.js中的meta:title 就是菜单栏名称
3. 路由到对应的页面
component: () => import(‘@/views/table/index’),中设置路由到views/table/index.vue页面
- 此处省略了.vue后缀名
- @可以理解成src目录
4. 在创建的vue页面引入js文件,调用方法实现功能
根据views中vue页面的import { getList } from '@/api/table’去api目录创建js文件,定义接口地址和参数。去让api目录下的js帮助vue页面从后端获取数据。
5. api目录下创建js文件,定义接口地址和参数
api/table.js定义接口地址和参数,帮助vue页面从后端获取数据
总结
- 先写路由
- 再写页面
- 页面调用方法做显示
- 最后定义方法从后端获取数据