Vue填坑

记录学习 饿了么项目 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 引用报错

This relative module was not found:

* ../components/star/star in ./node_modules/babel-loader/lib!.
/node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/yy/yy.vue?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: ''}]

-------------------------------------------------------------------------------------------------------

学习的时候疯狂踩坑，希望能帮到各位