Vue移动端项目搭建

最新推荐文章于 2024-04-20 07:49:09 发布

一念流转

最新推荐文章于 2024-04-20 07:49:09 发布

阅读量469

点赞数

分类专栏：前端文章标签： vue.js css css3

本文链接：https://blog.csdn.net/qq_35334269/article/details/104172257

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

设备像素和设备独立像素

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

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

这是一种负margin布局方式，兼容性最佳，各大浏览器均可完美兼容。

<!DOCTYPE html>
<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">footer</div>

</div>


</body>
</html>

弹性布局

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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">a</li>
    <li class="item">b</li>
    <li class="item">c</li>
    <li class="item">d</li>
</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服务器上。

一念流转

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue移动端项目搭建

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

扫一扫