记录学习 饿了么项目 vue遇到的坑
当然环境：WebStorm 2018.1.5 x64
-----------------------------------------------------------------
安装编译器跟破解，参考：点击打开链接
webstorm 快捷键，参考：点击打开链接
Vue Devtools工具，参考：点击打开链接
-----------------------------------------------------------------
chrome浏览器 没有 Resources 标签
-----------------------------------------------------------------
es 6添加语法检查 报错
-
<
template>
-
<
div>
-
</
div>
-
</
template>
-
-
<
script
type="
text/
ecmascript-6">
-
export
default {
-
};
-
</
script>
-
-
<
style
lang="
stylus"
rel="
stylesheet/
stylus">
-
-
</
style>
打开项目目录
npm install stylus
npm install stylus-loader
-----------------------------------------------------------------
最新Vue dev-server.js 不存在，替换成了webpack-dev-conf.js
webpack.dev.conf.js 文件下添加
-
const FriendlyErrorsPlugin =
require(
'friendly-errors-webpack-plugin')
-
const portfinder =
require(
'portfinder')
-
-
//添加↓-------------------------↓
-
const express =
require(
'express')
-
const app = express()
//请求server
-
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)
//通过路由请求数据
webpack.dev.conf.js 文件下的 ->devWebpackConfig 方法
-
publicPath: config.dev.assetsPublicPath,
-
proxy: config.dev.proxyTable,
-
quiet:
true,
// necessary for FriendlyErrorsPlugin
-
watchOptions: {
-
poll: config.dev.poll,
-
},
-
//添加↓-------------------------↓
-
before(app) {
-
app.get(
'/api/seller', (req, res) => {
-
res.json({
-
errno:
0,
-
data: seller
-
})
//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
-
}),
-
app.get(
'/api/goods', (req, res) => {
-
res.json({
-
errno:
0,
-
data: goods
-
})
-
}),
-
app.get(
'/api/ratings', (req, res) => {
-
res.json({
-
errno:
0,
-
data: ratings
-
})
-
})
-
}
-----------------------------------------------------------------
localhost换成的IP地址访问失败
ipconfig/all
-----------------------------------------------------------------
Vue-router 使用
使用到的文件
goods.Vue
-
<template>
-
<div>
123</div>
-
</template>
-
-
<script type=
"text/ecmascript-6">
-
export
default {};
-
</script>
-
-
<style lang=
"stylus" rel=
"stylesheet/stylus">
-
</style>
App.Vue
-
<template>
-
<div>
-
<div
class=
"tab">
-
<div
class=
"tab-item">
-
<!-- 使用 router-link 组件来导航. -->
-
<!-- 通过传入 `to` 属性指定链接. -->
-
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
-
<router-link to=
"/goods">商品</router-link>
-
</div>
-
</div>
-
-
<!-- 通过 view 刷新-->
-
<router-view></router-view>
-
</div>
-
</template>
-
-
<script type=
"text/ecmascript-6">
-
export
default {};
-
</script>
-
-
<style lang=
"stylus" rel=
"stylesheet/stylus">
-
</style>
router.js
-
import Vue
from
"vue";
-
import VueRouter
from
"vue-router";
-
-
// 引入组件
-
import goods
from
"../components/goods/goods";
-
-
// 要告诉 vue 使用 vueRouter
-
Vue.use(VueRouter);
-
-
//定义路由
-
const routes = [
-
{
-
path:
"/goods",
-
component: goods
-
},
-
{
-
path:
'/',
-
redirect:
'/goods'
-
}
-
]
-
-
//创建实例
-
var router =
new VueRouter({
-
routes
-
})
-
export
default router;
main.js
-
import Vue
from
'vue';
-
import App
from
'./App';
-
-
import router
from
"./router/router.js"
-
-
new Vue({
-
el:
'#app',
-
components: { App },
-
template:
'<App/>',
-
router,
// 注入到根实例中
-
render:
h => h(App)
-
});
-----------------------------------------------------------------
router-link标签 设置属性
-
<style lang=
"stylus" rel=
"stylesheet/stylus">
-
.tab
-
/*样式*/
-
display: flex
-
/*宽*/
-
widt:
100%
-
/*高*/
-
height:
40px
-
line-height:
40px
-
border-bottom:
1px solid rgba(
7,
17,
27,
0.1)
-
.tab-item
-
flex:
1
-
/*居中*/
-
text-align center
-
-
/*↓------------Vue-router 属性设置↓------------*/
-
/*路由点击颜色*/
-
a.router-link-active {
-
color: red
-
}
-
/*router-link 会默认 被渲染成 <a> 标签 （&作为父类 > 下的 a 标签）*/
-
& > a
-
/*样式*/
-
display: block
-
/*字体大小*/
-
font-size:
14px
-
/*颜色*/
-
color: rgb(
77,
85,
93)
-
router-link-active {
-
color: red;
-
}
-
<
/style>
-----------------------------------------------------------------
import 引用报错
?type=script&index=0!./src/components/yy/yy.vue
请注意使用
./ 或者 ../
src->
component->
xx->
xx.Vue
yy->
yy.Vue
yy.Vue 需要引用 xx.Vue组件（跨文件引用文件）
-
import xx
from
'components/xx'; 错误
-
import xx
from
'./components/xx'; 错误
-
import xx
from
'../components/xx'; 错误
-
import xx
from
'../../components/xx'; 正确
-------------------------------------------------------------------------------------------------------
Vue 1.0 与 Vue 2.0
v-for index 找不到 提示错误
Property or method "$index" is not defined on the instance but referenced during render.
修改编写方式
-
<li class="vue1.0" v-for="item in list">
-
<li class="vue2.0" v-for="(item, index) in list">
-------------------------------------------------------------------------------------------------------
transition
<div transition="fade"></div> vue 2.0 之后改为
<transition name="fade">
<div></div>
</transition>
-------------------------------------------------------------------------------------------------------
v-el:xx 替换成 ref="xx"
-
<div
class=
"foods-wrapper" v-el:foods-wrapper>
</div>
-
<div
class=
"menu-wrapper" v-el:menu-wrapper>
</div>
-
methods: {
-
//滚动方法
-
_initScroll(){
-
this.meunScroll =
new BScroll(
this.$els.menuWrapper, {});
-
this.foodsScroll =
new BScroll(
this.$els.foodsWrapper, {});
-
}
-
}
替换成以下
-
<div
class=
"foods-wrapper" ref=
"foodsWrapper">
</div>
-
<div
class=
"menu-wrapper" ref=
"menuWrapper">
</div>
-
methods:{
-
//滚动方法
-
_initScroll(){
-
this.meunScroll =
new BScroll(
this.$refs.menuWrapper, {});
-
this.foodsScroll =
new BScroll(
this.$refs.foodsWrapper, {});
-
}
-
}
-------------------------------------------------------------------------------------------------------
transition动画无效
cartcontrol .vue文件下的 动画无效，在减号外面加一个标签 <transition>
-
<!--外层动画-->
-
<transition name="move">
-
<div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
-
<span class="inner icon-remove_circle_outline">
</span>
-
</div>
-
</transition>
-------------------------------------------------------------------------------------------------------
购物车小球抛物线
shopcart.Vue
-
<!--vue1.0-->
-
<div class="ball-container">
-
<div transition="drop" v-for="ball in balls" v-show="ball.show" class="ball">
-
<div class="inner inner-hook">
</div>
-
</div>
-
</div>
-
<!--vue2.0 抛物线小球-->
-
<div class="ball-container">
-
<div v-for="ball in balls">
-
<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
-
<div class="ball" v-show="ball.show">
-
<div class="inner inner-hook">
</div>
-
</div>
-
</transition>
-
</div>
-
</div>
-------------------------------------------------------------------------------------------------------
在WebView 中，使用 Vuex的 swiper 滚动图片控件时，mounted更新数据时有一定几率没有及时重绘视图。导致 swiper 控件布局显示空。
解决方案：
<swiper v-show="property_splicing !== null" loop :list="data" style="height: 156px"></swiper>
初始化数据的时候不要把 data 设置为空。应该设置一条出错的数据。 data: []
data: [{img: 'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff', url: '', title: ''}]
-------------------------------------------------------------------------------------------------------
学习的时候疯狂踩坑，希望能帮到各位
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
