?xml version="1.0" encoding="UTF-8"?
首先，阐明一下我是一名iOS开人员，学习vue完全是因为项目需求，期间碰到了好多问题，马马虎虎建立了一个中台，虽然写的不是很好，但是作为第一个用vue开发项目，希望记录下来整个过程，开发时候怎么学习以及遇到的问题，可能大家没有遇到过，不喜勿喷。。。谢谢！
一、认识vue学习vue
用于开发的一门新的语言我是从官网看的vue的基础知识，从而了解vue，只要要怎么写，具体的还没有深入的去解析，因为时间的不允许，快速开发，只看结果。
总结：vue的界面分为三块： 实际上个人觉得就是将html5的开发的模块儿分开（很浅显的认识，只用于初学的不懂的，我也不是很懂），在template里面写布局，当然js还是在script里面 格式实在style。
因为前端是要展示给用户看的，所以当时为了能快点把界面搞出来，很迫切的想要知道代码写在哪儿，怎么才能展示出来呢，这就是下面的流程的介绍，这个网上有很多，给大家一个链接，当时我也是看了这个才把工程建造出来的，http://blog.csdn.net/fungleo/article/details/53171052，这里面是作者从搭建到开发显示流程，比较清晰，为作者打call。但是其中我个人遇到的问题的想说一下：
（1）、项目创建之初vue-cli 命令行一键创建的时候有一个地方是是否需要选择标准的开发语言，这个建议选NO，因为当时我选了yes之后，只要稍微有一点格式的不正确就会报错，选择了NO之后，就不用那么拘束了，也不会报错
（2）、上述流程里面的网络请求的封装我觉得很重要，毕竟我们的界面要请求数据，官网也好，度娘也好都建议用axios ，说vue-router不在维护，那么就涉及到了封装，上述流程作者封装了一个不带请求头的js，因为我们的网络请求是要携带头部信息的，所以要自己搞，这需要看看axios的介绍以及用法，可以百度。下面粘贴出我的修改：
// 引用axios
var axios = require('axios')
var CryptoJS = require("crypto-js/core")
var MD5 = require("crypto-js/md5")
var baseUrl = '/v1'
// 封装axios的get方法post方法put方法等
// 自定义判断元素类型JS
function toType (obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (parameters) {
for (var key in parameters) {
if (parameters[key] === null) {
delete parameters[key]
}
if (toType(parameters[key]) === 'string') {
parameters[key] = parameters[key].trim()
} else if (toType(parameters[key]) === 'object') {
parameters[key] = filterNull(parameters[key])
} else if (toType(parameters[key]) === 'array') {
parameters[key] = filterNull(parameters[key])
}
}
return parameters
}
// 网络请求深层封装
function httpService (method, urlStr, params,flag,success, failure){
// 过滤函数 怕有空或者不行的
// if (params) {
// params = filterNull(params)
// }
// 需要拼接的头部信息
var timestampMm = Date.parse(new Date()) // 时间戳
var timestampTemp = ''+timestampMm
var timestamp = timestampTemp.substring(0,10)
var nonce // 随机数
function MathRand () {
var Num = ''
for (var i = 0; i < 6; i++) {
Num += Math.floor(Math.random() * 10)
}
nonce = Num
}
MathRand()
var Numbers = nonce + timestamp // 拼接
var first_md5 = CryptoJS.MD5(Numbers) // 加密
var first_md5_str = '' + first_md5
var first_md5_upper = first_md5_str.toLocaleUpperCase() // 转大写
var firstmdStr = '' + first_md5_upper
var linkStr = 'b3c7e662782266fddd6f950059d3b812'
var link_end = linkStr + firstmdStr
var link_end_md = CryptoJS.MD5(link_end)
var link_end_mdStr = ''+link_end_md
var finalStr = link_end_mdStr.toLocaleLowerCase()
var second_md5 = ''+finalStr
// 通过将相关配置传递给 axios 来进行请求
axios({
// 请求方式
method: method, // 默认
// `url`是将用于请求的服务器URL
url: urlStr,
/// `baseURL`将被添加到`url`前面，除非`url`是绝对的。
// 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。
baseURL: baseUrl,
// `transformRequest`允许在请求数据发送到服务器之前对其进行更改
// 这只适用于请求方法'PUT'，'POST'和'PATCH'
// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream
// transformRequest: [function (data) {
// 做任何你想要的数据转换
// return data;
// }],
// `headers`是要发送的自定义 headers
headers: {'App-Key':'Holo_WeiXin','Timestamp':timestamp,'Nonce':nonce,'Authorization':'','Signature':second_md5,'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'},
// 拼接到url后面的
params: method === 'GET' || method === 'DELETE' ? params : null,
// `data`是要作为请求主体发送的数据
// 仅适用于请求方法“PUT”，“POST”和“PATCH”
// 当没有设置`transformRequest`时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream
data: method === 'POST' || method === 'PUT' ? params : null,
cache:false,
// auth:'',
// `timeout`指定请求超时之前的毫秒数。
// 如果请求的时间超过'timeout'，请求将被中止。
// timeout: 2000,
// `withCredentials`指示是否跨站点访问控制请求
// should be made using credentials
withCredentials: false, // default
// “responseType”表示服务器将响应的数据类型
// 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
})
.then(function (response) {
console.log(response);
success(response)
})
.catch(function (error) {
console.log(error);
});
}
// 返回在vue模板中的调用接口
export default {
get: function (url, params,flag, success, failure) {
return httpService('GET', url, params,flag,success, failure)
},
post: function (url, params,flag, success, failure) {
return httpService('POST', url, params,flag,success, failure)
},
put: function (url, params,flag, success, failure) {
return httpService('PUT', url, params,flag, success, failure)
},
delete: function (url, params,flag, success, failure) {
return httpService('DELETE', url, params,flag, success, failure)
}
}
大家看到的第四行，这个就是解决跨域的问题，我在进行网络请求的时候一直会遇到这个问题，因为我做iOS的 时候没有遇到过，刚开始也不懂最后查才知道，这个是跨域。
等大家做完项目的时候就会打包给后台让放到线上的服务器，但是开发的时候不用，这就要分开说解决这个跨域的问题。开发环境下比较简单，因为vue是基于node的服务，在生成的文件config下面的index.js,找到dev对应的地方，也就是开发情况的配置里面会有 proxyTable: {}，这个就是解决开发环境下跨域的地方，这个意思就是把你要访问的域名代理到本地，访问的是127.0.0.1：8080，但是实际上跨域成功访问的是你的域名，我的是这样的
'/v1': {
target: 'http://api.holo.hk/', // 你接口的域名
secure: false,
changeOrigin: false,
}
而打包完之后呢，这个需要后台来配置反向代理，我自己用apache虚拟了一个本地主机，我就将我需要访问的域名在虚拟的主机做了代理，（简单说一下虚拟本地主机的流程：
1.命令行执行sudo su
2.数据电脑的开机密码
3.进入可编辑模式：(我用的xampp的apache)vim /Applications/XAMPP/etc/httpd.conf
你会看到所有的LoadModule都是打开的不用管，你要看
# Virtual hosts
Include etc/extra/httpd-vhosts.conf
你要看Include前面有没有#注释，要有的话去掉，要不然没办吧建立虚拟主机应该是，还有要看的是
User xxxxx
ServerAdmin xxxx@holo.hk
这个是我改过的，原来的是 User daemon ,百度说是可以解决forbidden，要是还不行就看
AllowOverride none
Require all denied
改成
#AllowOverride none
#Require all denied
Order allow,deny
Allow from all
）现在上代码：
ServerAdminzhoucen@holo.hk
DocumentRoot "/Users/zhoucen/servers"
ServerNamewww.zcshop.com
ErrorLog "/Users/zhoucen/servers/Logs/error.log"
CustomLog "/Users/zhoucen/servers/Logs/access.log" common
就是这个地方加上：
到此为止就把代理的配置介绍完毕，如果后台用的其他的服务器那就让后台自己去配置，本来这就不是前端做的事。
这样我觉得我开发过程中最重要的事情就讲完了。下面来讨论下开发的文件
很重要的文件：
main.js 是开发的入口吧，一般的是，我在里面导入全局的变量，可以全局使用，比如封装的网络请求，使用的elementui。
app.vue 这个就是能够展示你的视图的地方，相当于你写的那些视图都是从这里开始的。
router.js 这个很重要，单页面应用，这个路由也就是我们说的路径，跳转什么的都是根据他，还有就是一个路由下面会有子路由，这就是分层次。比如说你有一个home.vue,但是home.vue又分了很多的模块儿，比如left.vue ,right.vue,top.vue 等等，那就把这个子模块儿的路由都放在home的路由下面，这样就很方便进行操作。
数据存储也是我们经常用的，我在这里用的是sessionstoreage，当然这些模块儿需要导入工程， npm install 模块儿的名字。
钩子也是很重要的，比如说我们登录之后点击浏览器后退在前进又能进来，这是不允许的，所以这个时候钩子就很重要。全局的钩子就是这个作用。
第一次写记录，很乱，接下来我会再次整理，希望那些遇到跟我一样情况的能够从我的经历中解决个问题，大神就别来了。
网友评论