组件开发说明
<p>[TOC]</p>
<h4>路由 router</h4>
<hr />
<h6>根路由</h6>
<p>本地开发，控制台、管理后台、观看端三端的路由设置在 vue.config.js 中进行配置</p>
<pre><code class="language-json">pages: {
index: {
entry: 'src/console/main.js',
template: 'public/console.html', // http://localhost:port/
},
admin: {
entry: 'src/admin/main.js',
template: 'public/admin.html', // http://localhost:port/admin/
},
wap: {
entry: 'src/wap/main.js',
template: 'public/wap.html', // http://localhost:port/wap/
},
}</code></pre>
<h6>页面路由</h6>
<p>页面路由使用Vue-Router <a href="https://router.vuejs.org/zh/" title="官网链接">官网链接</a>
admin、console、wap三个目录下有各自的router文件，文件目录：vhall_front_frame/src/[console|admin|wap]/router/index.js</p>
<p>开发环境采用hash模式，生产环境采用history模式</p>
<p>以console目录下router为例： vhall_front_frame/src/console/router/index.js</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
/*layout外路由在这里添加*/
// $vhall-index-end
{
path: '/about',
name: 'about',
component: () => import('@/console/pages/about/index'),
},
{
path: '/',
component: () => import('@/console/pages/layout'),
// $vhall-layoutRedirect-start
/*重定向路由在这里添加，例如：redirect: { name: 'room-manage' },*/
// $vhall-layoutRedirect-end
children: [
// $vhall-layout-start
/*layout内路由在这里添加*/
// $vhall-layout-end
],
},
],
});</code></pre>
<h6>添加路由</h6>
<ul>
<li>path命名以 "/" 开头，变量字母小写，多个单词之间用中横线 "-" 连接</li>
<li>name命名要保持和path一致，不包括 "/"</li>
<li>component引用模块以箭头函数方式，用import方式引用</li>
</ul>
<pre><code class="language-json">{
path: '/login',
name: 'login',
component: () => import('@/console/pages/login/index')
}</code></pre>
<h4>页面 pages</h4>
<hr />
<h6>目录结构</h6>
<p>所有页面放到对应端的pages文件夹下</p>
<p><code>vhall_front_frame/src/[console|admin|wap]/pages/</code></p>
<h6>页面命名</h6>
<p>页面命名采用小驼峰方式。添加页面需要先添加文件夹，并建立index.vue作为当前页面，如果有同级页面再采用其他命名。例如：</p>
<pre><code class="language-javascript">├── `vhall_front_frame`
│ ├── `src`
│ │ ├── `console`
│ │ │ ├── `pages`
│ │ │ │ ├── `roomManage` // 房间管理
│ │ │ │ │ ├── `index.vue` // 房间管理首页
│ │ │ │ │ ├── `edit.vue` // 房间修改页面
│ │ │ │ │ ├── `watchLimit` // 观看限制目录
│ │ │ │ │ │ ├── `index.vue` // 观看限制首页
└── └── └── └── └── └── └── `whitelist.vue` // 观看限制白名单页面</code></pre>
<h4>模块 components</h4>
<hr />
<h6>目录结构</h6>
<p>所有模块放到对应端的components文件夹下</p>
<p><code>vhall_front_frame/src/[console|admin|wap]/components/</code></p>
<h6>模块命名</h6>
<p>模块命名采用小驼峰方式。添加模块需要先添加文件夹，并建立index.vue作为当前模块，如果有同级模块再采用其他命名。例如：</p>
<pre><code class="language-javascript">├── `vhall_front_frame`
│ ├── `src`
│ │ ├── `console`
│ │ │ ├── `components`
│ │ │ │ ├── `doc` // 文档
│ │ │ │ │ ├── `index.vue` // 当前模块
│ │ │ │ │ ├── `list.vue` // 文档列表模块
│ │ │ │ │ ├── `images` // 当前模块所用到的图片目录
└── └── └── └── └── └── └── `doc.png` // 图片</code></pre>
<h4>状态管理 store</h4>
<hr />
<h6>目录结构</h6>
<p>所有模块放到对应端的store文件夹下</p>
<p><code>vhall_front_frame/src/[console|admin|wap]/store/</code></p>
<pre><code class="language-javascript">├── `vhall_front_frame`
│ ├── `src`
│ │ ├── `console`
│ │ │ ├── `store`
│ │ │ │ ├── `action.js`
│ │ │ │ ├── `getters.js`
│ │ │ │ ├── `index.js`
│ │ │ │ ├── `mutation-types.js` // mutation方法命名采用常量形式
│ │ │ │ ├── `mutations.js`
└── └── └── └── └── `state.js` </code></pre>
<p>所有mutation的方法名称，放在mutation-types.js中，以常量形式使用。命名全部大写字母。</p>
<p>mutation-types.js</p>
<p><code>export const SET_NICKNAME = 'SET_NICKNAME'</code></p>
<p>mutations.js</p>
<pre><code class="language-javascript">import * as types from './mutation-types'
const mutations = {
[types.SET_NICKNAME](state, nickname) {
state.nickname = nickname
},
}
export default mutations</code></pre>
<p>actions.js</p>
<pre><code class="language-javascript">import * as types from './mutation-types'
export const setUserInfo = function({ commit }, userInfo) {
commit(types.SET_NICKNAME, userInfo.nickname)
commit(types.SET_ACCOUNT_ID, userInfo.accountId)
commit(types.SET_APP_ID, userInfo.appId)
commit(types.SET_ACCESS_TOKEN, userInfo.accessToken)
}</code></pre>
<h4>通信 axios</h4>
<hr />
<p>所有接口写在 common/api/config.js 中：</p>
<pre><code class="language-javascript">const apis = {
adminLogout: [ //接口名称
'/admin/auth/logout', //接口地址
'POST' //接口请求类型
],
}
const getApi = (apiName) => apis[apiName]
export default getApi</code></pre>
<p>使用方式：</p>
<pre><code class="language-javascript">this.$http(
'接口名称', //接口名称
{ il_id: id }) //入参
.then((res) => { //返回结果
if (res.code == 200) {
//......
}
})</code></pre>