基于 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 删除。

编辑于

我来说两句

6 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

再谈web开中几种经典的大文件上传组件

1.aspnetupload 这是国人开发的一款收费.net控件,官网http://www.aspnetupload.net/ (不过也有一个免费版本的,允许上...

1816
来自专栏编程微刊

一个文艺的在线生成漂亮的二维码工具网站

913
来自专栏何俊林

Python爬虫之如何爬取抖音小姐姐的视频

这次爬的是当下大火的APP--抖音,批量下载一个用户发布的所有视频。各位也应该知道,抖音只有移动端,官网打开除了给你个APP下载二维码啥也没有,所以相比爬PC网...

1163
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(上)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

471
来自专栏张戈的专栏

百度分享无法抓取图片及摘要的折中解决办法

前天,cy 在《仿异次元百度分享工具条张戈修改版》一文留言告知,部分百度分享无法抓取图片: ? 亲自试了下,发现还真是抓不到图片,而且分享的内容也很单调!就一个...

3629
来自专栏WindCoder

2014-2015插件整理

主要作用:Protect your WordPress site by hiding vital areas of your site, protecting ...

432
来自专栏FreeBuf

漏洞追踪:最新IE UXSS漏洞技术分析

最近David Leo在Full Disclosure上爆出了一个ie的 uxss 漏洞,可以绕过ie的同源策略。FreeBuf也有相关的报道(点我查看)。本文...

1767
来自专栏FD的专栏

Phodit:自己动手打造智能的 Markdown 编辑器

最近,我在写一个新的 markdown 内容,过程中发现没有合适的 markdown 客户端。于是,我希望为自己定制一款全新的编辑器,原因有许多吧,大抵是没有一...

925
来自专栏程序员宝库

主流浏览器图片反防盗链方法总结

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想...

1065
来自专栏Material Design组件

Human Interface Guidelines — Text Fields

1315

扫码关注云+社区