Vue+webpack项目实践踩坑之路 | 持续更新

1、git clone 与vue init 相爱相杀

首先，我在git上新建了一个项目 leke-operation。

然后，我在本地clone了这个项目 leke-operation。

接着，我在本地的这个项目（目前是一个空文件夹 leke-operation）执行命令 vue init webpack leke-operation

这会儿你会很fu*k的遇到vue初始化命名必须输入项目名，

于是你的目录成立 leke-operation 文件夹里面又一个 leke-operation 文件夹。

尝试换个思路，我先init好我的项目，生成了一个 leke-operation 文件夹。

然后，我去clone项目，结果又是clone了一个新的leke-operation文件夹出来，又是包了一层目录。

接着去尝试checkout commit push 等等，各种Bug...

不说这些失败的尝试了，最后的解决方案很简单，简单到觉得自己是个zz

方案如下：

首先，我在git上新建了一个项目 leke-operation。

然后，我在本地clone了这个项目 leke-operation。

接着，我在本地的这个项目（目前是一个空文件夹 leke-operation）的父级目录中执行命令 vue init webpack leke-operation

~~这会儿你会很fu*k的遇到vue初始化命名必须输入项目名，~~

~~于是你的目录成立 leke-operation 文件夹里面又一个 leke-operation 文件夹。~~

它会提示你当前项目名已存在同名文件夹是否覆盖它，直接执行Yes!

最终如我所愿。

2、别忘安装less-loader

vue-cli 构建的项目默认是不支持 less 的，需要自己添加。

官网推荐的方法 npm install less 是不够的

正确的操作如下：

npm install less less-loader --save-dev

3、VeeValidate配置中文的两种不同做法

旧版： "vee-validate": "^2.0.0-rc.13"

新版："vee-validate": "^2.1.0-beta.7"

安装最新版的VeeValidate之后对其进行中文化操作时，

之前老一套（2.0版）中文化的做法如下图：

系统报错提示 addLocale 是不存在的，所以这个时候，要么将版本降低至2.0版，要么就再安装一个玩意儿：vue-i18n

执行命令 yarn add vue-i18n

此时，新一套（2.1版）中文化的做法如下图：

4、axios修改请求数据格式

默认请求数据的格式是这样的：

修改请求头信息

headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

修改请求数据

transformRequest: [function (data, headers) {
    let ret = ''
    for (let it in data) {
        if (data[it] === 0 || (data[it] || data[it] === '') || data[it] === false) {
            if (ret !== '') ret += '&'
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])
        }
    }
    return ret
}]

关于axios的具体代码配置如下：

const instance = axios.create({
    // 设置超时时间
    timeout: 30000,
    // 请求的baseUrl
    baseURL: baseUrl,
    // 请求头部信息
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    // 修改请求数据
    transformRequest: [function (data, headers) {
        let ret = ''
        for (let it in data) {
            if (data[it] === 0 || (data[it] || data[it] === '') || data[it] === false) {
                if (ret !== '') ret += '&'
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])
            }
        }
        return ret
    }],
    // 跨域请求时允许携带凭证（cookie）
    withCredentials: true
})