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 == 200){            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对象呢？

事件 refresh:function(e,src){      //vue获取当前事件的dom元素         var thisDom = e.currentTarget;  }

6、图片验证码刷新

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

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

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

　　可以通过$event这个对象，通过将$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实现不同路由展现不同页面

//系统模块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 设置下就好了