代码拉取完成，页面将自动刷新
多场景开发方案是指在在既有的DZQ的样式，布局，交互或功能上提供进一步的修改，用于扩充DZQ的能力，或者是用于自定义样式和交互。
为了可以使DZQ同时可以进行多场景自定义修改，还能支持对于持续更新维护的DZQ做进一步的更新，所以必须遵从以下规范进行开发。
可以根据自己的场景进行命令，并替换下面代码中的pay即可
package.json
{
// 以下命令为pay（支付场景下的命令）
"scripts": {
"dev:pay": "SCENE=pay nuxt",
"build:pay-spa": "SCENE=pay nuxt build --spa",
"build:pay": "SCENE=pay nuxt build",
"start:pay": "SCENE=pay nuxt start",
"build:pay-ssr": "npm run build:pay && npm run start:pay"
},
}
nuxt.config.js
根据条件名称，为插件提供变量。
// 条件编译
const conditionalCompiler = {
loader: 'js-conditional-compile-loader',
options: {
pay: process.env.SCENE === 'pay',
...
}
}
假如现在有一个A.vue文件，在你的场景下，需要对A.vue进行重写样式，或者大量修改来满足你的场景需要的情况，那么你可以采用这种方式来进行编写。
home.vue
<template>
<A></A>
</template>
<script>
export default {
//....
}
</script>
<style lang="scss">
// ....
</style>
A.vue
<template>
<view>A.vue</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
// ....
</style>
那么可以考虑这样编写新的A组件，例如Vue自身的mixin特性，编写一个新的组件，命名规范为（原组件名称-场景名称），然后通过mixin的方式，将原有组件mixin到新的组件上，然后根据场景要求，对组件的样式，dom结构或者组件的生命周期等进行重写，从而达到不修改原有代码的基础上，对于组件进行不同场景的修改，而且不影响正常DZQ的维护更新。
A-pay.vue
<template>
<view>A-pay.vue</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
// ....
</style>
引用组件时，可以使用自定义的编译条件
home.vue
<template>
<!-- IFTRUE_test -->
<A-pay></A-pay>
<!-- FITRUE_test -->
<!-- IFTRUE_default -->
<A></A>
<!-- FITRUE_default -->
</template>
<script>
export default {
//....
}
</script>
<style lang="scss">
// ....
</style>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。