组件开发流程
<p>[TOC]</p>
<ul>
<li>通过组件工厂构建出应用项目</li>
<li>在应用项目中进行开发</li>
<li>把应用中开发好的代码和文件拆分到组件目录中
<ul>
<li>拆分文件：把vue文件、图片文件、css等文件拆分到对应的目录中</li>
<li>拆分html代码：把html代码从应用项目中剪切出来，替换成html标记，把剪切出来的代码放到组件的config.js中</li>
<li>拆分JS代码：把JS代码从应用项目中剪切出来，替换成JS标记，把剪切出来的代码放到组件的config.js中</li>
</ul></li>
</ul>
<h4>组件介绍</h4>
<hr />
<p>按照目录格式创建组件目录</p>
<h5>组件代码包目录介绍</h5>
<pre><code class="language-javascript">`packages`
├── `login` // 登录组件
│ ├── `libs` // 源代码文件
│ │ ├── `admin` // 从应用项目admin目录中拆分出来的文件
│ │ ├── `console` // 从应用项目console目录中拆分出来的文件
│ │ ├── `wap` // 从应用项目wap目录中拆分出来的文件
│ │ └── `components` // 从应用项目components目录中拆分出来的文件
│ ├── `config.js` // 从应用项目中拆分出来的html代码和js代码
└── └── `package.json`</code></pre>
<h5>config.js 介绍</h5>
<p>把从应用端拆分出来的文件路径和代码，写到config.js中</p>
<pre><code class="language-javascript">module.exports = {
name: 'login',
// 组件名称
snippets: {
console: [
// 从应用项目console目录中拆分出来的代码或文件
{
addType: 'file',
// file：拆分文件，把应用中"src/console/pages/login/"目录下的文件拆分到组件"./libs/console/"目录中
target: 'src/console/pages/login/',
// 应用项目目录，以src开头
filePath: './libs/console/'
// 拆分到组件里的目录
},
{
addType: 'code',
// code：拆分代码
target: 'src/console/pages/room/watch/preview.vue',
// 把应用项目target文件中的代码剪切出来，替换成标记
template: [
// html标记类型
{
name: 'login',
// 标记的<name>
content: `<login class="login-wrap" v-if="showLogin" :roleControl="roleControl"></login>`
// 从应用项目target文件中的代码粘贴到content里
}
],
js: [
// js类型
{
name: 'import',
// 标记的<name>
content: `import Login from '../../login/watch'\n`
// 从应用项目target文件中的代码粘贴到content里
}
]
}
],
wap: [], // 从应用项目wap目录中拆分出来的代码或文件
admin: [] // 从应用项目admin目录中拆分出来的代码或文件
}
}</code></pre>
<h4>标记介绍</h4>
<hr />
<h5>template标记</h5>
<p>template标记是html内容 <name> 是标记名称，[content] 是要拆分出去的源代码</p>
<pre><code class="language-html"><!-- $vhall-<name>-start -->
[content]
<!-- $vhall-<name>-end --></code></pre>
<p><strong>举例</strong></p>
<pre><code class="language-javascript"><template>
<el-dialog width="440px" class="vh-media-choose" :visible.sync="isShow" @open="open" @close="close" center destroy-on-close>
<div class="vh-media-choose__tabs">
<!-- $vhall-mediaChooseTab-start -->
把这里的HTML剪切出来放到组件config.js中
<!-- $vhall-mediaChooseTab-end -->
</div>
<div class="vh-media-choose__content">
<!-- $vhall-mediaChooseContent-start -->
把这里的HTML剪切出来放到组件config.js中
<!-- $vhall-mediaChooseContent-end -->
<div class="vh-media-choose__btn">
<el-button type="primary" @click="confirm" :disabled="!mediaReady">确定</el-button>
<el-button plain @click="toggleShow(false)">取消</el-button>
</div>
</div>
</el-dialog>
</template></code></pre>
<h5>JS标记</h5>
<p>js标记是js代码内容 <name> 是标记名称，[content] 是要拆分出去的源代码</p>
<pre><code class="language-javascript">// $vhall-<name>-start
[content]
// $vhall-<name>-end</code></pre>
<p><strong>举例</strong></p>
<pre><code class="language-javascript">import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: process.env.NODE_ENV == 'production' ? 'history' : 'hash',
routes: [
// $vhall-index-start
把这里的JS代码剪切出来放到组件config.js中
// $vhall-index-end
{
path: '/about',
name: 'about',
component: () => import('@/console/pages/about/index'),
},
{
path: '/',
component: () => import('@/console/pages/layout'),
// $vhall-layoutRedirect-start
把这里的JS代码剪切出来放到组件config.js中
// $vhall-layoutRedirect-end
children: [
// $vhall-layout-start
把这里的JS代码剪切出来放到组件config.js中
// $vhall-layout-end
],
},
],
});</code></pre>