VUE学习过程中的错误集锦和tip

 

1.Newline required at end of file but not found

在错误文件的代码行下面多加一行空格就好

2如果要关闭则在命令行中按住ctrl+C则可以关闭。

 3把store.js拆开时遇到的问题:

如果我想在actions有我前面自定义的函数fn0,fn1怎么办?

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var state={
    count:10,
    fn:'hell',
    orderList:{name:'liliy'},
    imgUrl:''
}
const mutations={
    increment(state){//处理（状态）数据的变化
     state.count++
    },
    decrement(state){
     state.count--    
    }
}
const getters={
    count(state){
        return {'count':state.count,'imgUrl':state.imgUrl}
    },
    getOdd(state){
        return state.count % 2==0?'是偶数':'是奇数'
    }
}
var fn0=(url)=>{console.log('I am delay',url);state.imgUrl=url}
var fn1=function(){console.log('I am failure')}
const actions={
    increment:({//带参数（App.vue里的mapAction里定义的函数）执行
        commit //要干什么，执行时传入函数名进来，异步请求，判断，流程控制，名字不变
    })=>{
        commit('increment')//可以改名要保证和提交到mutations里的函数名一样
    },
    decrement:({
        commit
    })=>{
        commit('decrement')//后期放入actions.js里的好处是 App.vue定义了函数名,后期可以随意改变动作(放其它函数名)
    },
    clickOdd:({
        commit,state
    })=>{
        if(state.count % 2 ==0){
            commit('increment')
        }else{
            alert("是奇数不变")
        }
    },
    clickAsync:({
        commit
    })=>{
        new Promise((resolve,reject)=>{
            const a= new Image()
            a.onload=function(){
                resolve(fn0(a.src))//这里在拆分后报错,找不到fn0
            }
            a.onerror=function(){
                reject(fn1())
            }
            a.src='test.jpg'
        })

    }

}
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

拆后 :

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import Getters from './getters'

Vue.use(Vuex)
import actions from './actions'
import mutations from './mutations'
export default new Vuex.Store({
    actions,
    modules:{
        mutations
    }
})

action.js

export default{
    fn0:(url)=>{console.log('I am delay',url);state.imgUrl=url},
    fn1:function(){console.log('I am failure')},
    increment:({//带参数（App.vue里的mapAction里定义的函数）执行
        commit //要干什么，执行时传入函数名进来，异步请求，判断，流程控制，名字不变
    })=>{
        commit('increment')//可以改名要保证和提交到mutations里的函数名一样
    },
    decrement:({
        commit
    })=>{
        commit('decrement')//后期放入actions.js里的好处是 App.vue定义了函数名,后期可以随意改变动作(放其它函数名)
    },
    clickOdd:({
        commit,state
    })=>{
        if(state.count % 2 ==0){
            commit('increment')
        }else{
            alert("是奇数不变")
        }
    },
    clickAsync:({
        commit
    })=>{
        new Promise((resolve,reject)=>{
            const a= new Image()
            a.onload=function(){
                resolve(fn0(a.src))
            }
            a.onerror=function(){
                reject(fn1())
            }
            a.src='test.jpg'
        })

    }

}

getter.js

export default{
    count:(state) => {
        return {'count':state.count,'imgUrl':state.imgUrl}
    },
    getOdd:(state) => {
        return state.count % 2==0?'是偶数':'是奇数'
    }
}

mutations.js

import getters from './getters'
export default{
    state:{
        count:10,
        fn:'hell',
        orderList:{name:'liliy'},
        imgUrl:''
    },
    mutations:{
        increment(state){//处理（状态）数据的变化
         state.count++
        },
        decrement(state){
         state.count--    
        }
    },
    getters

}

待续.............

 

5

1 import * as obj from 'exports'
2 // node 会试着去寻找 node_modules/exports.js 模块
3 
4 // 正确写法
5 import * as obj from './exports'

 

6. Cannot assign to read only property 'exports' of object '#<Object>'

基本原因是import  和module.exports  是不能混用在.vue的文件里面的 

解决方案是

import {normalTime} from './timeFormat';

export default  {
//module.exports={
    normalTime
};

  7.Cannot read property '$createElement' of undefined 和

　　Uncaught Error: [vue-router] route config "component" for path: /home cannot be a string id. Use an actual component instead.

import HomeView from './components/Home.vue'
import FollowView from './components/Follow.vue'
import ColumnView from './components/Column.vue'
export default[
    {
        path:'/home',
        components:'HomeView'//这改成component，并不加引号
    },
    {
        path:'/follow',
        components:FollowView
    },
    {
        path:'/column',
        components:ColumnView
    }
]