VeeValidator

语言设置

校验消息默认是英文的，定义中文或其他语言的错误提示消息

    


        


            


            

        

        


            

                import VeeValidate from 'vee-validate';
            

        

    

    


        


            


            

        

        


            

                import Vue from 'vue'
            

        

    

    


        


            


            

        

        


            

                Vue.use(VeeValidate)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var dict = {
            

        

    

    


        


            


            

        

        


            

                zh_CN: {
            

        

    

    


        


            


            

        

        


            

                messages: {
            

        

    

    


        


            


            

        

        


            

                required: function(field){
            

        

    

    


        


            


            

        

        


            

                return field + '不能为空！';
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                between: function(field){
            

        

    

    


        


            


            

        

        


            

                return field + '输入不符合设定规则！';
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                min : function (field,leng) {
            

        

    

    


        


            


            

        

        


            

                return field + '长度不能小于'+leng+'位';
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
            

        

    

校验的时候需要设置语言

this.$validator.localize('zh_CN');

错误消息显示

显示指定字段的第一个错误

this.$validator.first('fieldname')

显示所有字段的第一个错误消息

this.$validator.errors.all()

Mock.js

配置

路由拦截配置不需要修改之前的代码,匹配的url请求会直接通过mock而不是请求服务器

    


        


            


            

        

        


            

                const handler = req => {
            

        

    

    


        


            


            

        

        


            

                return {mock数据};
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Mock.mock('url拦截规则,正则表达式',handler)
            

        

    

配置延迟时间

模拟服务器请求的异步特性

    


        


            


            

        

        


            

                Mock.setup({
            

        

    

    


        


            


            

        

        


            

                timeout:1000
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

Vuex

模块化

多人协作，或者中大型的项目需要把store分为模块

    


        


            


            

        

        


            

                const a = {
            

        

    

    


        


            


            

        

        


            

                 state : {foo:1},
            

        

    

    


        


            


            

        

        


            

                mutations : {hello(state)=> {}}，
            

        

    

    


        


            


            

        

        


            

                modules : {
            

        

    

    


        


            


            

        

        


            

                 ...嵌套
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                const b = {}
            

        

    

    


        


            


            

        

        


            

                const store = {
            

        

    

    


        


            


            

        

        


            

                 state : {},
            

        

    

    


        


            


            

        

        


            

                mutations : {},
            

        

    

    


        


            


            

        

        


            

                actions : {},
            

        

    

    


        


            


            

        

        


            

                modules : {
            

        

    

    


        


            


            

        

        


            

                 module_name_a:a,
            

        

    

    


        


            


            

        

        


            

                 module_name_b:b
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

在调用的时候，state 有命名空间的，而mutation和actions都与父模块共用同样的命名空间所以不能定义与父模块同名的mutation 或 action

获取模块的state

 this.$store.state.module_name_a.foo

调用模块的mutation

this.$store.commit('hello')

namespace

定义了namespace ,mutations 和 action 会带上模块的命名: module_name/muation

    


        


            


            

        

        


            

                const store = {
            

        

    

    


        


            


            

        

        


            

                modules : {
            

        

    

    


        


            


            

        

        


            

                namespace : true,
            

        

    

    


        


            


            

        

        


            

                a: {
            

        

    

    


        


            


            

        

        


            

                muations : {
            

        

    

    


        


            


            

        

        


            

                test(state) => {...}
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

这时候调模块内的mutation

this.$store.commit('a/test')

vuejs-datepicker

日期选择控件

设置默认值

 <datepicker v-model="mydate" </datepicker> 

日期格式化

<datepicker :format="'yyyy-MM-dd'"> </datepicker> 

语言选择（默认是英文）

导入语言资源文件，然后再设置:language

设置成中文