Vue使用中遇到问题汇总（二）

1、vue cli使用npm run dev报错cannot get /

　　config/index.js里有两个环境：一个是build，一个dev。

　　在config/index.js里面修改，build:{assetsPublicPath:'./'}；dev里面不需要修改，dev:{assetsPublickPath:'/'}。我本来在window上面开发的，后面移到linux上面，刚开始报错，我就把dev里面的路径改了，不报错，但是浏览器提示cannot GET /，怎么都找不到原因，就把dev路径改回去了，重新再npm run dev一次，就成功了。

2、stylus的&使用的问题，其实是熟悉css写法的问题，跟css写法大同小异的

　　这两种不同class就是写的时候有无空格的问题，当第二种你采用有空格的写法的话，是不生效的，因为默认是去子集找那个class=is-active的元素了

//第一种需要空格

.el-menu-toggle{

  & .icon-menu{}

}

//第二种不能加空格

.el-menu-item{

  &:hover{

    background-color $--background-color-menu-hover

    font-weight bolder

  }

  &.is-active{

    border-left 3px solid #409Eff;

    background-color $--background-color-menu-active;

    font-weight bolder

  }

}

3、使用vue-cli+webpack创建的项目，修改文件名称或者更改文件的位置，运营时会报错，是因为npm项目，在安装依赖（node_nodules）时，会记录当前的文件路径，当修改之后就无法正常启动。

　　解决办法：

　　（1）删除 node_modules 文件夹（如果修改项目名称，需要在package.json中修改对应的name）

　　（2）重新安装依赖 cnpm install

　　（3）启动项目 cnpm run dev

4、axios提交表单数据到后台，采用post方式

let config = {

    url:'/api/sr/aq/updt',

    method:'post',

    params:JSON.stringify(this.aqForm),//表单数据

    headers:{'Content-Type':'application/json'}

}

axios.post(config.url, JSON.stringify(this.aqForm), {headers:{'Content-Type':'application/json'}})

.then((response)=>{

    this.updateSR = false

})

　　采用config形式

submitForm(){

    let config={

        url:'/api/submitSR',

        method:'post',

        data:JSON.stringify(this.formData),

        headers:{'Content-Type':'application/json'}

    }

    axios(config).then((response) => {

        if(response.status == ){

            console.log('success')

        }else{

            console.log('Error Code:' + response.status)

        }

    }).catch((e)=>{

        console.log(e)

    })

}

　　主要就是data参数、和header头信息要设置，这种传递格式就是payload格式

5、vue获取当前事件的dom元素： var thisDom = e.currentTarget;

　　在vue里面，经常用到click，如何获取执行click事件的当前dom对象呢？

<span @click="refresh($event,item.imgUrl)">事件</span> 

refresh:function(e,src){

    //vue获取当前事件的dom元素

    var thisDom = e.currentTarget;

}

6、图片验证码刷新

<el-form-item v-if="errorCount >= 1 " prop="captchaCode" :rules="rules.required">

    <el-input v-model="login_pwd.captchaCode" class="code-input" placeholder="请输入图形验证码"></el-input>

    <img class="img_valid" @click="rnd = Math.random()" :src="'/api/code/getCaptchaImage?rnd=' + rnd">

</el-form-item>

　　原理：当一个<img>的src改变时，页面会自动刷新这个<img>

　　code/getCaptchaImage，即是后台接口地址

7、方法传值：我们在input中的方法希望获取input的value，怎么获取呢？

　　可以通过$event这个对象，通过将$event传入方法

<input type="text" value="value" @input="change($event)"/>

//我们可以成功的拿到我们希望的值

change (e) {

  console.log(e.target.value)

  this.value = e.target.value

}

8、v-cloak

　　如果出现{{}}的短暂出现的情况，可以通过添加v-cloak来处理。

　　这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

9、通过路由元信息meta实现不同路由展现不同页面

<template>

  <el-container :class="['app uf-col']">

    <template v-if="$route.meta.fullScreen">

      <router-view></router-view>

    </template>

    <template v-else-if="$route.meta.homePages">

      <Nav></Nav>

      <router-view></router-view>

    </template>

    <template v-else>

      <WHeader></WHeader>

      <el-container>

        <WMenu></WMenu>

        <router-view></router-view>

      </el-container>

    </template>

  </el-container>

</template>

//系统模块

export default [

    {

        path: '/login',

        name: 'login',

        component:() => import('@/views/system/login'),

        meta:{fullScreen:true}

    },

    {

        path:'/register',

        name:'register',

        component:() => import('@/views/system/register'),

        meta:{requireAuth:true,fullScreen:true}

    },

export default [

    {

        path:'/rescue',

        name:'rescue',

        component:() => import('@/views/pages/rescue'),

        meta:{homePages:true}

    }

]

　　然后我们再看下路由导航守卫，加上homePages：如果路由元信息里面requireAuth为true，或者homePages为true，都不拦截

router.beforeEach((to, from ,next) => {

    const token = store.getters.userInfo

    if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){

        next()

    }else{

        if(token){

            next()

        }else{

            if(to.path==="/login"){

                next()

            }else{

                next({path:'/login'})

            }

        }

    }

    return

})

10、elementUI的默认提示框样式修改

　　今天用element ui ，做了个消息提示，发现提示的位置总是在上面

　　可是我想让提示的位置到下面来，该怎么办？

　　最后还是看了官方的api

　　原来有个自定义样式属性 customClass 设置下就好了

巴特西

Vue使用中遇到问题汇总（二）

最新文章

热门文章