template

安装依赖

npm install

本地启动

npm run dev

本地开发，按照开发模式编译，使用 rap mock 数据，如果需要连接生产接口，更改 .env.development 文件 VUE_APP_API_BASE_URL 节点数据；

生产编译

npm run build

演示编译

npm run build:preview

演示：按照生产模式编译项目，但数据接口使用 rap mock 数据

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your end-to-end tests

npm run test:e2e

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.

参考

https://github.com/d2-projects/d2-admin https://github.com/sendya/ant-design-pro-vue

rpc 数据返回接口

{
	"meta": {
		"success": true,
		"message": "OK",
		"code": 200
	},
	"content": {
		"data": null,
		"list": null,
		"page": {
			"pageNum": 1,
			"pageSize": 10,
			"total": 99,
			"list": []
		}
	}
}

{
	"meta": {
		"success": true,
		"message": "OK",
		"code": 200
	},
	"content": {
		"data": {},
		"list": [],
		"page": {
			"pageNum": 1,
			"pageSize": 10,
			"total": 17,
			"list|1-10": [{
				"key|+1": 3,
				"id|+1": 3,
				"no|+1": "1",
				"description": "这是一段描述",
				"callNo|1-999": 1,
				"status|0-3": 1,
				"updatedAt": "@datetime",
				"editable": false
			}]
		}
	}
}

目录

tree -d -I 'node_modules|dist|config' > dir.md

keepAlive

vue 对 keepAlive 记录的原理是存储组件的 name，因此先对路由对应的 vue 视图文件设置 name 属性；

我们使用白名单记录需要缓存的组件名称，在路由切换时，会将路由 name 写入数组；

因此需要满足路由 name 和组件 name 相同时，此视图页面才会被缓存；

禁用缓存

设置路由 meta.keepAlive = false;

export default {
  name: 'page-workplace',
}

  {
		path: '/dashboard/workplace',
		name: 'page-workplace',
		meta: {
			title: '工作台',
			// keepAlive: false,
			perms: ['sys:user:view'],
		},
		component: loaded('dashboard/Workplace'),
	},