基于 vue-cli + webpack 开发实践：《体育视频播放页》
原创基于 vue-cli + webpack 开发实践：《体育视频播放页》
原创
导语
随着Web前端技术快速发展，前端开发模式先后经历了静态黄页时期、服务器组装动态网页数据时期、后端为主的MVC模式时期、前后端分离时期、纯前端MV直出、前端Virtual Dom、MNV前后端同构时期。《体育视频播放页》基于vue-cli+webpack开发，此次开发总结，将会总结开发过程中涉及到的知识点以及开发技巧，希望能帮助到想要在工作中使用Vue.js开发的小伙伴。
专辑页地址：http://v.sports.qq.com/#/cover/zk7my2yvxrax0hv/a0023vpchps
单视频页地址：http://v.sports.qq.com/#/page/x0395mhxxi8
一、技术选型
基础框架搭建 Vue 2.0 + vue-cli + webpeak （ES6/babel + vue-resource + vue-router）
1.1 环境配置（需要node环境，使用npm安装相应的依赖包）
- Node.js v6.0 及以上
- NPM v3.0 及以上
1.2 快速安装
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
1.3 vue-cli自带命令（测试部分可配置）
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
1.4 开发环境
$ npm run dev
1.4 代码构建
$ npm run build
1.4 代码发布
$ npm run deploy
二、组件化构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。
2.1 cover页面，组件树如下：
2.2 page页面，组件树如下：
三、文件目录结构
src为开发目录
assets用来存放js、css、img等资源文件
components存放组件
views存放多页面模版组件
main.js 主程序入口
index.html 页面入口
package.json 定义项目所需要的各种模块，以及项目的配置信息
build 执行命令以及webpack配置项
dist 构建后文件目录
四、技术点
4.1 核心插件 Vue Router ： https://router.vuejs.org/zh-cn/
安装：shell$ npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
// 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们
// 创建 router 实例，设置参数，并定义路由
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/page/:vid',
component: PageView
},
{
path: '/cover/:cid',
component: IndexView
},
{
path: '/cover/:cid/:vid',
component: IndexView
}
]
})
// 创建和挂载根实例
const sv = new Vue({
router
}).$mount('#app')
4.2 核心插件 Vue resource （不再继续维护vue-resource，并推荐大家使用 axios）
The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.
用法：
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
// global Vue object
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
下面在列举一些基础知识：
4.3 声明式渲染 ｛｛data｝｝
#html
<!-- 视频标题 -->
<h2 class="tit">{{ title }}</h2>
<!-- /视频标题 -->
#script
export default {
name: 'video-module',
data () {
title： '视频标题'
｝
｝
4.4 条件与循环 v-if、v-show、v-for
<p v-if="seen">现在你看到我了</p> // 惰性的，如果不需要显示，则什么都不做
<p v-show="seen">现在你看到我了</p> // 通过display:none隐藏显示
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
4.5 单元素/组件过渡 、
<transition>
<button v-bind:key="docState">
{{ buttonMessage }}
</button>
</transition>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
4.6 组件 使用Prop传递参数
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
<child message="hello!"></child>
4.7 非父子组件通信
有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。