使用vue+element开发移动端页面

作者:
淡白
创建时间:
Oct 23, 2019, 3:19:04 PM
学习 Vue 1,260

摘要:介绍为了更好的使淡白影视在手机web页面有更好的表现。所以决定用vue开发一套手机前端页面.编译的源码可以通过cordova编译成跨平台的应用.ps:经过开发一段时间后,发现在各大浏览器都有自己内置的播放器所以导致很多弹幕显示问题.并且使用cordova打包的app应用也存在播放问题.所以app端采

介绍

为了更好的使淡白影视在手机web页面有更好的表现。所以决定用vue开发一套手机前端页面.编译的源码可以通过cordova编译成跨平台的应用.
ps:经过开发一段时间后,发现在各大浏览器都有自己内置的播放器所以导致很多弹幕显示问题.并且使用cordova打包的app应用也存在播放问题.
所以app端采用原生开发,移动web端对弹幕不支持.

项目地址:淡白影视app

创建项目

项目基于nodejs开发所以需要安装nodejs
下载地址
然后安装vue-cli、vue和cordova加element-ui等所需依赖
推荐使用vue-cli的vue ui创建vue项目
在cmd窗口输入vue ui即可,稍后会在浏览器打开管理页面
TIM截图20191023200955.png
进入到工作目录创建项目按照需要配置创建项目即可

vue项目开发

项目结构

TIM截图20191023201836.png
这是已经开发了两天的项目结构了
已经实现了一些基本功能
下面讲讲这两天遇到的困难

  1. 由于vue是我最近才学的还不熟悉,所以在开发组件和使用组件的时候对如何引入组件和使用组件是按照vue-cli生成的初始项目修改添加才搞懂的.
    2.使用axios获取数据也遇到了一定困难,跨域问题还有cookie问题
    3.使用element-ui修改默认样式也让我搞了半天,由于我主要注重移动端页面所以element-ui一些组件偏大,需要修改css,根据官网提供的工具编译不通过.所以我用的方法是找到需要修改样式元素的class通过!important覆盖它原有的样式