精华内容
下载资源
问答
  • yt-h5 云听_活动h5
  • vue-video vue移动端简单自定义控件播放器
  • 主要介绍了Vue移动端右滑屏幕返回上一页,本文结合实例给大家介绍的非常详细,并附有源码下载,需要的朋友可以参考下
  • 移动端商城 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the...
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
  • 基于 vue移动端调试小工具 功能 移动端模拟 console 信息 一键清理 cookies、localstorage,刷新页面 显示 cookies、localstorage 显示页面性能数据 安装 npm install --save vue-mobile-debug // or cnpm ...
  • +F2+E 预期收益: 一套完整的vue移动端数据可视化项目源码; 一个完整的vue项目开发流程,含前端页面和后台服务; 一套vue移动端UI开发框架的实战训练; 一套移vue动端图表组件框架的实战训练;
  • Suo UI 安装 npm i suo-ui -S # for Vue 1.x npm i suo-ui@1 -S 用法 自定义配置 请参阅。
  • vue价格日历 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 有关工作原理的详细说明,请参阅。
  • 移动网络 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
  • Vue移动端适配方案

    2021-01-05 17:29:30
    Vue移动端适配写在前面二级目录三级目录 写在前面 此文章需要使用到Vue CLI搭建项目,同时使用的是阿里的 二级目录 三级目录

    写在前面

    • 现在的手机五花八门,造就了移动端窗口分辨率繁多的局面。
    • 在不同分辨率的屏幕下保持与UI图一致的效果,就成了让前端不得不头疼的问题。
    • 本文采取的适配方案:阿里推出的lib-flexible + rem适配方案。
    • 大致思路:安装lib-flexible相关第三方插件,用于自动设置HTML根元素的基准值。我们写代码时,利用rem单位去书写样式。
    • lib-flexible的GitHub

    使用到的两个工具介绍

    工具一:lib-flexible —— 用于自动设置 rem 基准值

    • 1、安装
    npm i -S amfe-flexible
    

    很多文章还是使用的npm i lib-flexible -S,但是已经不被推荐,具体可看GitHub:
    在这里插入图片描述

    • 2、在main.js引入
    import 'amfe-flexible'
    
    • 3、看具体效果:我们在切换不同设备时,在右边的代码中可以看到html标签的font-size一直在改变。看到这样的效果就说明成功了。
      在这里插入图片描述

    在效果图中我们看到一个规律,就是font-size永远都是屏幕分辨率的十分之一。如下:
    在这里插入图片描述

    这也是lib-flexible规定的,具体可看源码第18行。如下:
    在这里插入图片描述

    工具二:postcss-pxtorem —— 是一款 postcss 插件,用于将单位转化为 rem

    使用了lib-flexible之后,我们的rem适配第一步已经完成了。第二部就是在写代码时使用rem单位,而不是我们熟悉的px单位。我们不能再使用px了,而是先将设计图的px单位根据相应的公式,转换成rem,最终将rem写在代码里。
    设计图这么多的px单位最终要手动转成rem,是一个人都会被烦死。
    所以:postcss-pxtorem出现了,他会手动将我们代码中的px单位自动转换成rem。
    也就是说,设计图时多少px,我们在代码里就写多少px,postcss-pxtorem最终会将这个px转换成rem。
    它是一个开发时依赖。

    • 1、安装
    npm install postcss-pxtorem -D
    
    • 2、配置
      配置一:在项目的根目录下创建:postcss.config.js文件,并且添加如下配置:
    plugins: {
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      }
    

    rootValue:表示根元素字体大小,它会根据根元素大小进行单位转换。

    1、在上面就提到过,lib-flexible最终转换html元素的font-size是手机屏幕的十分之一,所以这个rootValue的值是根据我们的设计稿来设置的。
    2、由于我的设计稿是通过iphone6做为原型设计的,宽度是375,所以在这里我rootValue的值为37.5。
    3、如果你的设计稿宽度是750,那么rootValue的值为75。
    4、如果你使用的UI库是Vant,那么这个rootValue的值就必须设置为37.5,因为 Vant 是基于逻辑像素 375 写的,所以如果你设置为 75 的话,Vant 的样式就小了一半。
    5、如果设计稿就是750,我们在测量设计稿的时候都必须除2才能使用,否则就会变得很大。不想除就找UI把设计图变成0.5倍图,也就是宽为375。

    propList:用来设定可以从 px 转为 rem 的属性,例如 * 就是所有属性都要转换,width 就是仅转换 width 属性,值一般为*。
    配置二:browserslist:你会发现在 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
    如果你是Vue CLI4.x创建的项目,找到packages.json,并将browserslist字段的配置修改如下:表示咱们的系统向下兼容到安卓4.0版本,IOS8版本。
    在这里插入图片描述

    如果你是Vue CLI3.x创建的项目,找将项目根目录下的.browserslistrc 文件修改如下:
    在这里插入图片描述

    • 3、配置结束后需要将项目npm run 重启一下即可生效。

    • 4、怎么样判断是否生效:打开浏览器控制台,如果我们在代码中写的px都转换成rem了,表示成功。如下:
      在这里插入图片描述

    • 5、注意:在vue单文件中,包含在style内的px单位会自动转换成rem,但是行内样式中的px单位不会转换成rem。

    效果

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在不同设备下可以得到相同的效果,即rem适配成功。

    展开全文
  • vue移动端swiper轮播

    2019-10-15 13:35:59
    [vue 移动端 swiper 轮播](日常记录) (一个简单的商城类项目的常用商品轮播) 目前移动端做好的轮播组件 肯定是swiper,所以咱们也是用了swiper 1 npm 安装 在指定的目录下 npm install vue-awesome-swiper --save...

    [vue 移动端 swiper 轮播](日常记录)
    (一个简单的商城类项目的常用商品轮播)
    目前移动端做好的轮播组件 肯定是swiper,所以咱们也是用了swiper
    本来是轮播两边小的,但是那样滑动优化不是很好,有一点卡顿,需要两边小的直接css样式调整就行了
    1 npm 安装
    在指定的目录下

    npm install vue-awesome-swiper --save
    2引用
    全局;在main.js中

    import Vue from ‘vue’
    import VueAwesomeSwiper from ‘vue-awesome-swiper’

    // require styles
    import ‘swiper/dist/css/swiper.css’

    Vue.use(VueAwesomeSwiper, /* { default global options } */)
    局部引用

    // require styles
    import ‘swiper/dist/css/swiper.css’

    import { swiper, swiperSlide } from ‘vue-awesome-swiper’

    export default {
    components: {
    swiper,
    swiperSlide
    }
    }
    swiper参数很多,官网链接:https://www.swiper.com.cn/usage/index.html
    ,,
    下面是源码,
    在这里插入图片描述

    在这里插入图片描述
    欢迎学习讨论,大神绕道

    展开全文
  • 头条 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • vue移动端路由切换完整实例 在写移动端时,因为需要给页面做转场动画,便有了这次的研究 其中最主要的时以下两个问题: 浏览器导航栏的切换 IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,...
  • 主要介绍了vue移动端UI框架实现仿qq侧边菜单组件,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
  • h5页 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • vue移动端

    2021-07-29 13:51:52
    一、 项目源码目录设计 引入reset.css,在static/css/reset.css router引入多了路由标签和属性: 标签:, , 属性:route, router 食物分类:

    一、

     

    项目源码目录设计

    引入reset.css,在static/css/reset.css

    router引入多了路由标签和属性: 

    标签:<router-link/>, <router-view/>, <keep-alive/>

    属性:route, router

    食物分类:

     

    展开全文
  • 今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 龙猫 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 移动端多页应用脚手架(支持路由) 目录 1. 安装 版本(全局安装):NODE :8.5.0 由于 npm 安装源太慢,建议换成淘宝 cnpm 安装源 进入工程目录模块安装: cnpm install 2.工程目录规范 |—— mode_modules npm 安装...
  • 基于vue移动端UI框架

    千次阅读 2018-09-20 13:44:11
    优秀的基于VUE移动端UI框架合集 1. vonic&amp;amp;amp;nbsp;一个基于&amp;amp;amp;nbsp;vue.js&amp;amp;amp;nbsp;和&amp;amp;amp;nbsp;ionic&amp;amp;amp;nbsp;样式的 UI 框架,...

    1.vux 基于WeUIVue(2.x)开发的移动端UI组件库

    基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。

    中文文档 在线预览

    特性

    • star数最多

      这可能跟vux出现得早有一定关系,从vue.js火的早期,vux就跟着火热的诞生了。

    • 风格与微信一致

      它的UI风格,优先跟微信一致,适合开发微信端应用。

    2.Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库

    中文文档  在线预览

    特性

    • 容易上手

      同样由饿了么出品的PC端UI框架elementUI,在使用上与Mint UI有些相似。用过element-ui的我,觉得Mint UI就更容易上手了

    • 风格与element一致

      它的UI风格,优先跟IOS一致,如弹窗、时间等选择器、进度条等等;多选框、单选框则跟elementUI类似。

    3.MUI  最接近原生APP体验的高性能前端框架(此框架是应该是基于原生js和css开发的,不是基于vue.js) 

    中文文档

    4.Cube UI 

    滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库

    中文文档

    特性

    • 质量可靠

      由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。

    • 体验极致

      以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。

    • 标准规范

      遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。

    • 扩展性强

      支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发

    • 文档打开太慢

      开发文档只在github上,访问速度受限,我好几次都请求失败。

    展开全文
  • 主要介绍了从零开始搭建vue移动端项目到上线的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一分钟将Vue移动端项目一键打包成app

    万次阅读 多人点赞 2020-10-07 10:47:29
    vue项目开发完成后,我们就可以把项目打包成一个手机app,是不是很神奇,而且是一键生成,不需要操作。 1,把vue项目打包成dist目录 我们先将项目目录下config文件内index.js中 assetsPublicPath修改为 ...
  • vue-cli4 做了哪些功能(已验证): code spliting 代码分割,将代码按照 html/css/js 的文件进行分 chunk 打包 tree shaking 将没有引用到的代码不打包,减少打包的体积和速度 hash 实现持久化缓存,当你改变某个...
  • Vue移动端右滑屏幕返回上一页

    千次阅读 2020-02-23 02:40:24
    Vue移动端右滑屏幕返回上一页 2019年06月25日 20:43helloweba.net 作者:月光光 标签:Vue.js JavaScript 有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令...
  • 先给大家分享一下源码:https://github.com/lx544690189/vue-mobile-calendar Build Setup # install dependencies npm install # build for production with minification npm run build Usage install npm ...
  • Vue移动端开发问题纪要 1、UC浏览器兼容性问题 现象 在部分Android机型中的UC浏览器下访问,出现白屏现象 解决 之前遇到过类似的问题,第一反应应该是babel-polyfill的问题,要么没有引入要么是引入的方式不对...
  • vue移动端模仿qq左右滑动删除

    千次阅读 2017-07-15 23:09:02
    vue移动端模仿qq左右滑动删除

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,056
精华内容 3,222
关键字:

vue移动端源码

vue 订阅