1、设置webpack文件别名
在webpack.base.conf.js中找到：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': resolve('src/components')
}
},
2、mock数据
在webpack.dev.conf.js文件中
//首先
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
//找到devServer,添加
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
// 这里是你的json内容
errno: 0,
data: ratings
})
})
}
3、设置默认路由
export default new Router({
linkActiveClass: 'active', // 配置路由的默认class
routes: [
{path: '/', redirect: 'goods'}, // 设置默认路由
{path: '/goods', component: goods},
{path: '/ratings', component: ratings},
{path: '/seller', component: seller}
]
}) ;
4、如何在手机端预览页面
使用ipconfig查看本机地址，如192.168.1.2:8080/#/goods，进入草料二维码网cli.im，生成二维码扫一扫进行预览。
注意：需要保证手机与电脑在同一个局域网
5、border 1px的适应问题
对此就涉及到像素和DPR的关系，可以看一下这篇移动web开发之像素和DPR。
写移动端时，是按照设计稿标注的像素除以设备的DPR来写真实的像素。不同的DPR设备呈现的视觉效果不一样，解决方案如下：
.border-1px($color) {
position: relative;
&::after{
display: block;
position: absolute;
left: 0;
bottom: 0;
border-top: 1px solid $color;
width: 100%;
content: ' ';
}
}
@media (-webkit-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
@media (-webkit-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.border-1px{
&::after{
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
}
6、vue-resource提供HTTP服务，处理前后端交互
（1）在package.json的dependencies中声明vue-resource相应的版本：'vue-resource": "^1.5.1"。使用cnpm install安装。
（2）在main.js中import引入vue-resource；使用Vue.use(VueResource)全局注册；
（3）在APP.vue中使用vue-resource获取数据
created() {
this.$http.get('/api/seller').then(response => {
response = response.body;
if (response.errno === ERR_OK) {
this.seller = response.data;
}
});
}
7、CSS Sticky footers布局
使用场景：如果页面不够长的时候，页脚块黏贴在视窗底部；如果够长，页脚块会被内容向下推送。
（1）将页脚的顶部外边距设为负数
// html
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
// css
<style>
html,
body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
</style>
（2）使用flexbox弹性布局
// html
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
//css
<style>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
</style>
8、实现菜单按钮和商品的左右联动
这里需要用到better-scroll插件，可npm安装。
思路：
（1）获取右边每个分类商品的纵坐标值区间来确定对应左边菜单的index值，给其加上currentIndex类名高亮显示。
（2）当点击左边菜单分类按钮时，根据better-scroll插件的scroll事件，实现映射。
<-- html部分 -->
<-- 左侧菜单 -->
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}"
@click="selectMenu(index,$event)">
<span class="text border-1px">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
</span>
</li>
</ul>
</div>
<-- 右侧商品 -->
<div class="foods-wrapper" ref="foodsWrapper">
<ul>
<li v-for="item in goods" class="food-list food-list-hook">
<h1 class="title">{{item.name}}</h1>
</li>
</ul>
</div>
// JS部分
<script>
// 1、首先在data()中定义listHeight数组，存放每个商品分类的商品总高度。高度计算函数如下：
_calculateHeight() {
let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook");
let height = 0； // 设置临时变量存放高度
this.listHeight.push(height);
for (let i = 0; i < foodList.length; i++) {
let item = foodList[i];
height += item.clientHeight;
this.listHeight.push(height);
}
}
// 2、计算高度对应左边的当前index值，需要将函数写在computed里面
currentIndex() {
for (let i = 0;i < this.listHeight.length;i++){
let height1 = this.listHeight[i];
let height2 = this.listHeight[i+1];
if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
return i;
}
}
return 0;
}
</script>
9、利用ref属性可以获取到dom元素或者是子组件，从而可以调用子组件的方法
（1）操作DOM元素：
// html
<div class="foods-wrapper" ref="foods-wrapper">
// js
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
（2）调用子组件的方法或属性：
// html
<shopcart ref="shopcart" ></shopcart>
// js
// 调用子组件中的drop方法
this.$refs.shopcart.drop(target);
10、使用better-scroll，点击事件在手机模式触发一次，但在pc模式会触发两次，需添加
if (!event._constructed) {
return;
}
判断是否是原生点击事件。
网友评论