基于vue2.0的在线电影APP,

基于vue2.0构建的在线电影网【film】,webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova 打包成APP

从零开始搭建,适合新手练手参考。GitHub地址,api来源于网上,仅供开发参考之用,禁用于商业,否则后果自负。

在线demo

apk安装包后续再放出吧 O(∩_∩)O

屏幕截图,该项目使用了响应式布局,适配全分辨率的屏幕

移动端效果


启用侧边栏模式

PC端效果

主要特色:

  1. 组件化开发
  2. 下拉刷新
  3. 无限加载
  4. 浏览历史
  5. 响应式布局
  6. 缓存数据
  7. 收藏
  8. 视频播放
  9. md风格模式
  10. 开发中...

目录结构

# web目录结构

├─build                 # build配置目录
├─config                # 相关配置
├─screenshot            # 屏幕截图
├─src                   # 项目源码主目录
│  ├─assets             # 资源
│  │  └─less            # less通用文件目录
│  ├─components         # 页面及其组件
│  ├─router             # 路由
│  └─vuex               # vuex,其中包含了全局api,状态管理器
│      └─modules        # moduless
├─static                # 外部资源引入
│  ├─css                # 外部样式
│  │  ├─font            # 字体图标
│  │  └─woff            # 字体图标
│  └─js                 # 外部js
└─test                  # 测试用,不用管这个
    ├─e2e
    │  ├─custom-assertions
    │  └─specs
    └─unit
        └─specs

A Vue.js project

运行

npm install

npm run dev

npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

原文地址:https://www.cnblogs.com/10manongit/p/12210001.html

时间: 2024-09-27 11:09:09

基于vue2.0的在线电影APP,的相关文章

基于vue2.0的一个豆瓣电影App

1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie 然后一路回车 接着 进入项目目录 cd vue-movie 然后安装项目依赖包 cnpm install 没安装cnpm的先执行这个命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 接着 npm run dev 看到

饿了么基于Vue2.0的通用组件开发之路(分享会记录)

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

一款基于vue2.0的分页组件---写在页面内

通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 1 .page { 2 font-weight: 900; 3 height: 40px; 4 text-align: center; 5 color: #888; 6 margin: 20px auto 0; 7 background: #f2f2f2; 8 } 9 10 .pagelist { 11

基于Vue2.0的音乐播放器——歌手模块(拿不到数据)

来这里的都可能在看,慕课网vue2.0 的音乐播放器的相关页面,如果使用视频介绍的方法,相当于现在来说是获取数据回报如下的错误: {code: -500001, ts: 1529809544209} code : -500001 ts : 1529809544209 原因也简单:最新的vue2.0 webpack模板中没有dev-server.js文件,进行后台数据的模拟获取,只需要使用从接口获取数据后放在本地进行代理,页面就能拿到代理的数据了具体操作如下: before(app) { app.

基于vue2.0的网易云音乐 (实时更新)

本人在自学vue,之后想在学习过程中加以实践.由于之前有做过jquery的播放器效果,ui仿照网易云,地址 www.daiwei.org/music 于是就想做vue 的网易云播放器,网上也有类似的项目.看了一下都挺不错的,于是就想自己做一个试试 项目基于Vue 2.0  使用Vue-router,axios获取本地的data.json文件(所有的用户,音乐信息),以及vuex 的状态管理 本人是一枚小白,边学习边做的,这个播放器有什么不足之处,希望各位可以提出意见建议,我们共同学习进步. Gi

vue相关文件说明(基于vue2.0)

1.config:生产,开发环境配置参数 2.static:第三方资源,这里面的文件直接写路径,不能用'import'导入 3.node_modules:引入一些依赖包 4..babelrc:定义了ES6的转码规则,基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码 此文件里的一些属性解释 (1)  presets:预设项 (2)  modules:模块风格(比如:CMD,UMD,AMD,commonJs等),如果为false就没有这些风格 (3)  stage-2:草案阶段

基于vue2.0和vue-cli搭建前端项目

1.安装node.js 2.基于node.js,利用淘宝npm镜像安装相关依赖 (注意检查版本更新) 3.检查node的版本:  用 npm install npm -g 更新npm的版本,再次输入 npm -v 确认版本大于3.0 4.安装淘宝镜像:国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像,不用镜像后面的安装还可能报错,  安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 5

Vue2.0 render: h => h(App)的解释

render: h => h(App)是ES6的写法,其实就是如下内容的简写: render: function (createElement) { return createElement(App); } 官方文档中是这样的,createElement 是 Vue.js 里面的 函数,这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上. render: functi

Vue2.0 render:h => h(App)

首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果: 其次,Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树: 最后,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,然后 createElement 会以 APP 为参数进行调用,关于 createE