Pm-bidevaluation-std-ui NPM

pm-bidevaluation-ui

安装依赖

npm install

本地服务

npm run serve

打包

npm run build

打包并发布

npm run publish-build

单独发布

npm run upload

配置地区打包

新建.env.xxx环境文件，基本包含常见4个常量，

# 打包模式 production 固定值，这样与正式打包输出一样
NODE_ENV = production 
# 区分打包配置
VUE_APP_MODE = lh
# 打包完成后输出的文件名
outputName = 漯河-评标5.0
# 输出的资源文件夹名称
outputFile = 前端包

在package.json新建命令

 "xxx": "vue-cli-service build --mode xxx"

路由构建

先获取菜单构建菜单对象，然后匹配相应路由，全局当前路由对象完整信息

解决万级数据渲染

控制DOM节点数据 https://github.com/x-extends/vxe-table

vxe-table 使用注意点

大部分方法是Promise，注意异步

同级路由刷新

方式一，在根节点 router-view 控制显示隐藏

<template>
	<div id="app">
		<router-view v-if="routerAlive" />
	</div>
</template>

<script>
export default {
	name: "App",
	components: {},
	data() {
		return {
			routerAlive: true,
		};
	},
	provide() {
		return {
			routerRefresh: this.routerRefresh,
		};
	},
	methods: {
		// 这种方式解决跳转同类型路由不刷新
		routerRefresh() {
			this.routerAlive = false;
			this.$nextTick(() => {
				this.routerAlive = true;
			});
		},
	},
};
</script>

方式二，在 router-view 添加不同key

<template>
	<div class="main-view">
		<transition name="fade" mode="out-in">
			<keep-alive :include="cachedViews">
				<router-view :key="key"/>
			</keep-alive>
		</transition>
	</div>
</template>

<script>
export default {
	name: "MainView",
	computed: {
		cachedViews() {
			return []; // 控制缓存
		},
		key() {
			return this.$route.fullPath; // 为后续解决同级不刷问题
		},
    },
    created(){
        console.log(this.$route)
    }
};
</script>