一、前言

不知不觉7天就要结束了，自己竟然成功的坚持下来了。短暂的休整后，全新的生活将要开启，不能再像之前一样懈怠，自己要会明辨是非。今天总结下使用vue中遇到的小问题。

二、单独引入vue.js

有的项目很简单，就没必要使用脚手架，但是通过CDN引入又会出现很多问题，下面是我工作中遇到的问题，希望对你们会有所帮助。

1.在引入vue之前引入这三个文件（browser.min.js，runtime.js，polyfill.min.js），网上找了很多版本都有问题。我用的时候是下面这几个。vue-2.6.11

<script src="../lib/js/browser.min.js"></script>
<script src="../lib/js/runtime.js"></script>
<script src="../lib/js/polyfill.min.js"></script>
<script src="../lib/js/vue.min.js"></script>

2.写有关es6的script标签加上type="text/babel".由于babel要求script标签设置为text/babel ，结果其执行时间总是很晚，要晚于text/javascript这种的script标签。

<script type="text/babel">
let vm = new Vue ({})
</script>

3.其他地方尽量不要用es6语法

有一个公共js（含有es6）我是通过script引入的，但是当我加上type="text/babel"，并且置于new Vue 的script标签之前，还是会报错。所以特别提醒，由于text/babel执行时间晚的原因，其他引入文件尽量不要出现es6语法

4.页面加载出现初始化 {{}} 的情况

CSS中加 [v-cloak] { display: none; }，这样等数据加载完了才会显示，但同时在数据加载的过程中可能会出现白屏，这时可以使用loading效果美化。

三、vue项目

1.请求参数问题

默认情况下，axios将JavaScript对象序列化为JSON。axios请求post发送的数据，默认是json格式（在控制台xhr的headers可以看到Requset Payload），后台默认不接受。后台太懒，前端解决方法：

1.1 安装qs

npm install --save axios vue-axios qs

1.2在src/main.js设置

import axios from 'axios'
import qs from 'qs'

Vue.prototype.$qs = qs
Vue.prototype.$http = axios

1.3发送请求的数据用qs处理下 this.$qs.stringify({})

this.$http({
method: 'post',
url: 'api.php',
data: this.$qs.stringify({
  type: '1',
  egg: e + 1
})
}).then((data) => {
if (data.data.status === '1') {
  this.message = data.data.data.msg
  this.eggs[e].src = './static/img/open-egg2' + e + '.png'
} else if (data.data.status === '0') {
  this.message = data.data.msg
}
}).catch(function (err) {
console.log(err)
})

这时你再看请求信息发现变回我们熟悉的Form Data了。

2.axios返回的数据默认包一层data

例如：后台返回的数据是：

{
"msg": "请登录",
"status": "1",
"status1":"100",
"data": {
  "betMoney": "18721.70"
}
}

而使用axios返回的响应结构如下：

{
// `data` 由服务器提供的响应----这个是我们需要的数据
data: {},

// `status` 来自服务器响应的 HTTP 状态码
status: 200,

// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',

// `headers` 服务器响应的头
headers: {},

 // `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}

我想获取status，需要这样：

.then((res) => {
  console.log(res.data.status);//1
})

3.v-for 循环时直接使用 v-model 绑定报错

// 错误的代码
<div v-for="(item, index) in data" :key="index">
// 直接绑定 v-for循环的item成员会报错
<input v-model="item" />
</div>

将v-model直接绑定到v-for迭代别名。这将无法修改v-for源数组，因为写入别名就像修改函数局部变量一样。考虑使用一个对象数组并在对象属性上使用 v-model。原因：v-model不可以直接修改v-for循环迭代时别名上的数据，但是，可以通过index下标来引用所需的数据，可以达到相同目的。

// 正确代码
<div v-for="(item, index) in data" :key="index">
// 通过index, 绑定数组中对应项
<input v-model="data[index]" />
</div>

4.打包成相对路径

有时候网站不是发布到服务器根目录，也许会用到这个。

4.1修改config/index.js

修改build里面的config/index.js：将assetsPublicPath: '/',改为assetsPublicPath: './',

4.2修改 build/utils.js

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader' 
  })
}

，增加 publicPath: '../../'

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
}

在vue文件中，引用图片（目录是static/img），如果图片是在html中加载，图片src写成./static/img相对于打包后的路径， css中的图片src写成../../static/img 到此就告一段落了。 7天，over！

结束也是新的开始 | 七日打卡