前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3.0 高仿饿了么项目(项目初始化)

vue3.0 高仿饿了么项目(项目初始化)

作者头像
用户4344670
发布2019-08-28 11:32:03
8950
发布2019-08-28 11:32:03
举报
文章被收录于专栏:vue的实战

饿了么项目.png

  • 对于移动端适配的理解 常用rem作为适配方案
  • 对于flex的理解
  • 样式当前有效

项目初始化

  • 移动端屏幕禁止缩放
  • 样式初始化
  • 1px解决方案
  • 移动端300ms延时问题
  • 项目中使用stylus
  • 项目中使用iconfont **安装stylus fastclick **
代码语言:javascript
复制
cnpm install stylus stylus-loader fastclick  --save

项目中引入依赖

代码语言:javascript
复制
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import fastClick from "fastclick"///   300ms延时 问题
import "./assets/styles/reset.css" ///   样式初始化
import "./assets/styles/border.css" ///  1像素解决方案
Vue.config.productionTip = false
fastClick.attach(document.body);///   300ms延时 问题
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

组件代码

代码语言:javascript
复制
<template>
  <div>
    <div class="header">
      <div class="header-left">返回</div>
      <div class="header-input">输入景点城市主题</div>
      <div class="header-right">城市</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<!--1rem = html font size = 50px;     如果给的是二倍图,那么px 要除以2, 再除以font size;

-->
<style lang="stylus" scoped>
.header {
  height: 0.86rem;
  display: flex;
  background-color: #00bcd4;
  color: #fff;
  line-height: 0.86rem;

  .header-left {
    float: left;
    width: 0.64rem;
  }

  .header-right {
    float: right;
    width: 1.24rem;
    text-align: center;
  }

  .header-input {
    flex: 1;
    background-color #fff;
    border-radius: .1rem;
    margin-top: .12rem;//  上边距
    height: .64rem;//  高度
    line-height : .64rem;
    color: #ccc;
    padding-left: .2rem;
    margin-left: .2rem;  //  左边距
  }
}
</style>

1.iPhone5分辨率320x568,像素640x1136,@2x

2.iPhone6分辨率375x667,像素750x1334,@2x

3.iPhone6 Plus分辨率414x736,像素1242x2208,@3x,(注意,在这个分辨率下渲染后,图像等比降低pixel分辨率至1080p(1080x1920)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.08.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档