Vue移动端项目搭建-笔记

目录

    • 设备像素和设备独立像素
    • CSS绝对底部和伪类:after清除浮动
    • 弹性布局
    • 图标字体制作
    • 模拟后台数据
    • 项目打包

设备像素和设备独立像素

1、dips:device independent pixels 设备独立像素
2、DPR:Device Pixel Ratio 设备像素比
DPR=设备像素 / dips
3、移动端开发的问题:DPR != 1
解决思路:使用伪元素设置1px的边框,然后使用媒体查询,根据DPR的大小,对边框进行缩放。

CSS绝对底部和伪类:after清除浮动

这是一种负margin布局方式,兼容性最佳,各大浏览器均可完美兼容。
Vue移动端项目搭建-笔记_第1张图片


<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
    <script src="lib/vue.js">script>
head>

<style>
    .wrapper{
        min-height: 100%;
    }
    .wrapper .content{
        height: 100px;
        background-color: red;
        padding-bottom:50px;
    }
    .footer{
        background-color: green;
        position:relative;
        margin-top:-50px;
        height:50px;
    }
    .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
    }
style>

<body>
<div>

    <div class="wrapper clearfix">
        <div class="content">content,假装这里有浮动的子类div>
    div>

    <div class="footer">footerdiv>

div>


body>
html>

弹性布局

标签的显示模式设置为flex,为盒状模型提供最大的灵活性。对容器中的条目布局、对齐和分配空间。在条目尺寸未知或动态时也能工作。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        display: flex;
        flex-direction: row;
        /*justify-content: space-between;*/
        justify-content: space-around;
    }
    .item{
        width: 200px;
        height: 300px;
        background: red;
        border: 1px solid #ccc;
        font-size: 50px;
        text-align: center;
        line-height: 300px;
        color: #fff;
    }
style>

<body>

<ul class="box">
    <li class="item">ali>
    <li class="item">bli>
    <li class="item">cli>
    <li class="item">dli>
ul>

body>
html>

图标字体制作

使用图标字体在线工具IcoMoon,减少页面上图片的使用,减少请求次数,提高了性能。
将字体文件下载到本地,项目中需要使用fonts和style.css,fonts是字体文件,style.css是字体的样式文件。

模拟后台数据

前端开发在调试期间用一个虚拟的对象代替真实对象以便测试,这个虚拟的对象就是mock对象。
下面使用express启动服务来配置后台访问接口,在vue-cli的webpack.dev.conf.js文件的const portfinder = require(‘portfinder’)下面添加代码。

const express = require('express')
const app = express()
var appData = require('../mock/xxx.json')//加载本地数据文件
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

然后在devServer属性中添加代码。

before(app) {
  app.get('/api/appData',function(req,res) {
    res.json({
      errno: 0,
      data: appData
    })//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
  })
}

最后在浏览器访问 http://localhost:8080/api/appData 接口。

项目打包

1、在config/index.js中修改build属性
2、运行cnpm run build打包

assetsPublicPath: './',	//打包后静态文件在当前目录下
productionSourceMap: false,	//环境设置为生产环境

3、打包后dist文件需要放在服务器才能打开,放在tomcat服务器上或者基于node的Web服务器上。

你可能感兴趣的:(Vue)