基于 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) {
  // ...
})

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第136天:Web前端面试题总结(理论)

  a. 请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域

2193
来自专栏腾讯NEXT学位

【干货】解剖小程序的 setData

双线程的渲染机制、通信机制,setData 的出现、工作原理、使用建议等,应该要怎么去理解呢?

5342
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第三节)

3298
来自专栏代码GG之家

android这些UI库,再不看你就OUT了

项目地址: https://github.com/luxiaoming/awesome-android-ui 本文推荐一些常用的UI库,...

2585
来自专栏前端杂货铺

Thinking in React

本文翻译自React的官方博客,详情请阅读原文。 React非常适合构建组件化的应用,它注重高性能,因此组建的重用,项目的扩展都十分灵活,Facebook和in...

2737
来自专栏IMWeb前端团队

React-Redux 源码解析系列 -- React-Redux的作用

前面的章节讲完了redux的部分,又已经有了react,那为什么还需要有React-Redux呢?这个React-Redux 又帮助我们做了什么呢? conte...

19610
来自专栏编程微刊

三个Bootstrap免费字体和图标库

1804
来自专栏星流全栈

二〇一六年的前端入门指南

1258
来自专栏林德熙的博客

win10 uwp 获得缩略图 文件缩略图视频小图

有时候需要获得文件或视频的缩略图。 本文提供两个方法,用于获得文件的缩略图和截取视频指定时间的显示图片。

1831
来自专栏企鹅号快讯

前端插件以及部分细分网址梳理

图来源网络 前端插件以及部分细分网址梳理 插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 tot...

2269

扫码关注云+社区