前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于 vue-cli + webpack 开发实践:《体育视频播放页》

基于 vue-cli + webpack 开发实践:《体育视频播放页》

原创
作者头像
梁源
修改2017-07-20 11:14:44
2.5K5
修改2017-07-20 11:14:44
举报
文章被收录于专栏:梁源的专栏

导语

随着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 快速安装

代码语言:javascript
复制
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

1.3 vue-cli自带命令(测试部分可配置)

代码语言:javascript
复制
# 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 开发环境

代码语言:javascript
复制
$ npm run dev
代码语言:javascript
复制
  1.4 代码构建
代码语言:javascript
复制
$ npm run build

1.4 代码发布

代码语言:javascript
复制
$ 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() 明确地安装路由功能:

代码语言:javascript
复制
// 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们

代码语言:javascript
复制
// 创建 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])
代码语言:javascript
复制
// 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

代码语言:javascript
复制
<!-- 视频标题 -->
   <h2 class="tit">{{ title }}</h2>
<!-- /视频标题 -->

#script

代码语言:javascript
复制
export default {
  name: 'video-module',
  data () {
     title: '视频标题'
  }
}

4.4 条件与循环 v-if、v-show、v-for

代码语言:javascript
复制
<p v-if="seen">现在你看到我了</p> // 惰性的,如果不需要显示,则什么都不做
<p v-show="seen">现在你看到我了</p> // 通过display:none隐藏显示
代码语言:javascript
复制
<ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
</ol>

4.5 单元素/组件过渡 、

代码语言:javascript
复制
<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
代码语言:javascript
复制
<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传递参数

代码语言:javascript
复制
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
代码语言:javascript
复制
<child message="hello!"></child>

4.7 非父子组件通信

有时候两个组件也需要通信(非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

代码语言:javascript
复制
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 导语
  • 一、技术选型
  • 二、组件化构建
  • 三、文件目录结构
  • 四、技术点
相关产品与服务
事件总线
腾讯云事件总线(EventBridge)是一款安全,稳定,高效的云上事件连接器,作为流数据和事件的自动收集、处理、分发管道,通过可视化的配置,实现事件源(例如:Kafka,审计,数据库等)和目标对象(例如:CLS,SCF等)的快速连接,当前 EventBridge 已接入 100+ 云上服务,助力分布式事件驱动架构的快速构建。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档