vue项目（饿了么）过程中的问题

1.本地配置mock数据（源地址：https：//www.jb51.net/article/135280.htm）

vue2.X在构建目录下的webpack.dev.conf.js配置：

//在const portfinder = require(‘portfinder')后添加
const express = require('express')  // nodejs开发框架express，用来简化操作
const app = express()    // 创建node.js的express开发框架的实例
var appData = require('../data.json')  //加载本地数据文件
var seller = appData.seller;
const ratings = appData.ratings;
const goods = appData.goods;
var apiRoutes = express.Router()    // 编写路由
app.use('/api', apiRoutes) // 所有通过接口相关的api都会通过api这个路由导向到具体的路由

在找到devServer对象，在里面添加相关路由设置：

before (app) {
      app.get('/api/seller', function (req, res) {
        // 服务端收到请求后返回给客户端一个json数据
        res.json({
         // 当我们数据正常时，我们通过传递errno字符为0表示数据正常
         errno: 0,
         // 返回json中的数据
         data: seller
        })
      });
}

测试访问本地数据：HTTP：// locolhost：8080 / API /卖家

2.字体图标

阿里图标库：HTTP：//www.iconfont.cn/

icomoon图标库：HTTPS：//icomoon.io/

我使用的是icomoon图标库

【最终效果】

【第一步】：

打开链接进入icomoon图标库（https://icomoon.io/），单击右上角的按钮icoMoo App，进入图标选择界面

【第二步】：

上传你的svg文件，点导入图标图标

选中你要的图标，点击右下角图标，页面跳转后点击下载即可。

【第三步】：

解压下载的字体图标包，拷贝字体文件夹和的style.css到你的站点里面去。

【第四步】：

使用：1。在main.js中引入iconfont.css样式：import'./assets/font/style.css'

在vue文件中引用<i class =“icon-keyboard_arrow_right”> </ i>

假如报错，检查一下是否需要下载css-loader依赖包：npm install css-loader --save

3.Sticky footer布局（固定底部布局）：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

经典套路一思路：给内容区域设置 min-height: 100%，将 footer 推到屏幕下方

然后给 footer 添加margin-top，其值为 footer 高度的负值，就能让 footer 回到屏幕底部

<body>
<!-- 另外，为了保证兼容性，需要在wrapper上添加clearfix类. -->
<!-- 在内容区外添加一个wrapper包裹起来 -->
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

<style>
html,body,.wrapper {
     height: 100%;
}
.wrapper {
     height: auto; min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}
.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
</style>

套路二：使用flex布局

<div class="wrapper">
    <div class="content">这里是主要内容</div>
    <div class="footer">这是页脚区块</div>  
</div>

<style>
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex: 1;
}
.footer {
    flex: 0;
}
</style>

vue项目（饿了么）过程中的问题

1.本地配置mock数据（源地址：https：//www.jb51.net/article/135280.htm）

猜你喜欢