拆分举例
<p>[TOC]</p>
<h4>创建组件目录</h4>
<hr />
<pre><code class="language-json">`packages`
├── `qa` // 问答组件
│ ├── `libs`
│ │ ├── `admin`
│ │ ├── `console`
│ │ ├── `wap`
│ │ └── `components`
│ ├── `config.js`
└── └── `package.json` </code></pre>
<h4>编辑config.js</h4>
<hr />
<pre><code class="language-javascript">module.exports = {
name: 'qa',
// 组件名称
snippets: {
console: [
{
addType: 'file',
// 拆分文件
target: 'src/console/components/qa/',
// 应用中的文件目录
filePath: './libs/components/pc/'
// 放到组件中的文件目录
},
{
addType: 'code',
// 拆分代码
target: 'src/console/pages/room/watch/watch.vue',
// 应用中的文件
template: [
// 拆分html代码
{
name: 'tabContent',
// 标记的<name>
content: `
<div class="tab-content" v-show="tabIndex == 'qa'">
<vh-qa-questioner
:roomId="roomInfo.room_id"
:accountId="roomInfo.third_party_user_id"
:banChatAll="banChatAll"
:banChat="banChat"
:showInput="!needLogin.switch"
avatarType="nickName"
:haveOperationPermission="false"
:isQaDittoSwitch="isQaDittoSwitch"
ref="qa"
></vh-qa-questioner>
</div>`
// 拆分出来的html内容
}
],
js: [
// 拆分js代码
{
name: 'events',
// 标记的<name>
content: `
// 问答的是否打开
EventBus.$on('component_qa_status', (status) => {
this.isQa = status
if (!status) {
this.tabIndex = 'chat'
}
});`
// 拆分出来的js代码
}
]
}
],
wap: [],
admin: []
}
}</code></pre>
<p>以控制台观看端举例，WAP端及Admin端开发方式同控制台，区别 如在观看页面调用问答组件。则addType为“code”。target为目标路径即构建成功后的观看页路径“src/console/pages/room/watch/watch.vue”。将以tabContent命名钩子中的内容，粘贴到console下。由于以下代码属于html中结构，因此在config.js中snippets.console的template中。name是钩子的名称“tabContent”，该名称可根据位置含义不同任意替换为唯一标志。content是钩子中内容区域全部代码块。</p>
<pre><code class="language-html"> <!-- $vhall-tabContent-start -->
<div class="tab-content" v-show="tabIndex == 'qa'">
<vh-qa-questioner
:room-id="roomInfo.room_id"
:account-id="roomInfo.third_party_user_id"
:ban-chat-all="banChatAll"
:ban-chat="banChat"
:show-input="!needLogin.switch"
avatar-type="nickName"
:have-operation-permission="false"
:is-qa-ditto-switch="isQaDittoSwitch"
ref="qa"
/>
</div>
<!-- $vhall-tabContent-end --></code></pre>
<p>如在观看页面写有跟问答有关的JS代码。则addType为“code”。target为目标路径即构建成功后的观看页路径“src/console/pages/room/watch/watch.vue”。将以events命名钩子中的内容，粘贴到console下。由于以下代码属于JS代码，因此在config.js中snippets.console的js中。name是钩子的名称“events”，该名称可根据位置含义不同任意替换为唯一标志。content是钩子中内容区域全部代码块。</p>
<pre><code class="language-javascript">listenEvents() {
// $vhall-events-start
// 问答的是否打开
EventBus.$on('component_qa_status', (status) => {
this.isQa = status;
if (!status) {
this.tabIndex = 'chat';
}
});
// $vhall-events-end
}</code></pre>
<h4>组件代码进行回收</h4>
<hr />
<p>将以上步骤生成的文件夹添加到fe-packages项目中后，执行<code>lerna publish --registry http://192.168.66.26:4873</code>，如上传成功，则证明该组件已经发布成功。此时需要跟后台同事沟通，上传一个组件，属于平台特性/房间配置/互动组件或账号登录，并告知是属于哪个二级分类，如不清楚，可以与产品沟通，在后台生成一个组件对应的唯一ID，将组件包名称及唯一ID填写在构建代码CLI代码库中config.json中。</p>
<pre><code class="language-json"> { "shopId": "后台生成一个组件对应的唯一ID", "id": "fe-packages项目中组件的包名", "type": "front(属于前端组件，写为‘front’即可)", "version": "版本号，如拉取最新则无需填写" }</code></pre>