基于 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 条评论
登录 后参与评论

相关文章

来自专栏phodal

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

491
来自专栏前端人人

React第三方组件1(路由管理之Router的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2503
来自专栏天天P图攻城狮

iOS基础开发实践:iMessage Extension浅析

1492
来自专栏walterlv - 吕毅的博客

WPF 多线程 UI:设计一个异步加载 UI 的容器

2018-09-08 12:53

951
来自专栏ytkah

将微信聊天页和文章页拆分为两个任务卡片【微信高级教程6】

  在任意聊天窗口输入 //multiwebview 并发送,聊天和文章页面就可以被拆分为两个任务,并能同时出现在多任务切换页面中。如果在看文章过程中来了微信消...

3469
来自专栏向治洪

React Native之携程Moles框架

因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套...

1878
来自专栏Nian糕的私人厨房

Vue2.0 数据抓取及Swiper组件开发

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

854
来自专栏知晓程序

开发 | 掌握这 7 个要点,iOS 开发者也能快速入门小程序

1253
来自专栏CSDN技术头条

Mark!Android最佳的开源库集锦

工欲善其事,必先利其器。一个好的开发库可以快速提高开发者的工作效率,甚至让开发工作变得简单。本文收集了大量的Android开发库,快来切磋一下,到底哪一个最适合...

1857
来自专栏更流畅、简洁的软件开发方式

【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!

  我们在做增删改查的时候,必可避免的要做表单,那么表单是怎么弄出来的呢?拖拽控件、手写、js创建还是第三方控件(包括js版)? 以前用服务器控件写了一套表单控...

2268

扫码关注云+社区