零基础项目手摸手带你成长!

92 阅读1分钟
  • 1、移动端css

    npm install normalize.css --save,用于处理不同版本浏览器见的css 样式问题。

  • 2、报错

image.png

  • 先卸载: npm uninstall vue-loader-v16
  • 然后在用 cnpm i vue-loader-v16 进行重新安装

3、项目中阿里图标使用 iconfont

image.png

image.png

image.png

@import './style/viriables';
@import "./style/mixins";
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@include ellipsis;

页面中使用iconfont 图标 重点

image.png

image.png

$content-fontcolor: #333

color: $content-fontcolor;

图片抖动 hack 技术处理 使用css

图片 width 1024 height 388 用 高 /除 宽 用百分比使用

image.png

image.png

mock 数据模拟网站 www.fastmock.site/#/

项目中引入百度地图全屏

<template>
  <div>
    <div>
      <baidu-map class="bm-view" :center="center" :zoom="zoom" :style="select" @ready="handler"></baidu-map>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      center: {
        lng: 0,
        lat: 0
      },
      select: {
        width: '100%',
        height: '',
        marginBottom: '10px'
      },
      zoom: 3
    }
  },
  mounted () {
    this.selecth()
  },
  methods: {
    handler ({ BMap, map }) {
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    selecth () {
      this.select.height = (window.innerHeight) + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>

.bm-view {
  width: 100%;
}
</style>