vue-cli项目的基本设置总结

1、路由配置默认页面及去除#号设置

在router下的index里配置mode:‘history’

export default new Router({
  routes: [
    {
      path: '/',//这里path设置/或者*
      name: 'index',
      component: index,
    },
    .
    .
  ],
  mode:'history'
})

2、检测路由

watch:{
        $route:{
           handler(newRouter){
	        	 console.log(newRouter)
            },
            immediate: true//true发生路由时执行，反之则不然
        }  
  }

3、vue.js 路由

this.$router.push(
      {
           path:path,//路由路径
           name:name,//路由名称
           query:{}//路由传参
       }
   )

4、获取路由传参

通过检测路由获取query参数

5、this

当在函数内部要执行this时要在函数外部,将this赋值使用

6、父组件向子组件传参

父组件传参
<Navigation :name="navName" :type="1" :pathRouter="pathRouter"></Navigation>
子组件获取
props:["name","type","pathRouter"]

7、父组件调用子组件函数

//父组件调用子组件
<Pagination @CurrentChange="CurrentChange"></Pagination>
//父组件执行CurrentChange(data)函数,data可以获取子组件所执行的参数
//子组件
<div @click="click"></div>
click(e){
	this.$emit('CurrentChange', e)
}
//子组件函数将参数传给父组件

8、端口号更改

config文件夹下的index.js更改host及port即可

9、axios封装

我在开发过过程中axios.get与axios.post 参数无法传到后台
所以个人将axios封装使用

function AxiosGet (url,params,result){
    RequestHttp(url,"GET",params,result)
}
function AxiosPost (url,params,result){
    RequestHttp(url,"POST",params,result)
}
function RequestHttp(url,method,params,result){
    axios({
        url:url,
        method:method,
        params:params,//get时传参
        data:params,//post时传参
        responseType:"jsonp",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
    })
    .then(function (res) {
         result(res.data)
    })
    .catch(function (error) {
        console.log(error)
    })
}

调用

AxiosGet (url,params,function(res){
	console.log(res)
})
AxiosPost (url,params,function(res){
	console.log(res)
})

10、工具封装

// 时间格式化
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
export const formatData = (data,pattern) =>{
    var d = new Date(data).Format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(data).Format(pattern);
    }
    return d.toLocaleString();
}
// 判断手机号
export const isPhone = (phone) =>{
    if (!(/^1[34578]\d{9}$/.test(phone))) {
        return false;
    }
    return true;
}
// 判断对象是否为空
export const isNull = (obj) =>{
    if(JSON.stringify(obj) == "{}"){
        return true
    }else{
        return false
    }
}
// 判断身份证正误
export const isIdentity = identity =>{
    if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(identity))){
        return false;
    }
    return true;
}

调用

import {formatData ,isPhone,isNull ,isIdentity } from 'Utils'
//日期格式化
formatData (data,'yyyy-MM-dd hh:mm;ss.S')
data: 支持long string
pattern：根据前端需求进行时间格式化
//判断手机号
isPhone (phone)
//判断对象是否为空
isNull (obj)
//判断身份证正误
isIdentity (dentity)