Vue框架使用总结

Vue是目前比较流行的web前端框架，所以趁着暑假学习一波，于是写了自己的博客系统
项目地址: 前端 后端
因为Vue框架的开发者文档写得非常完善，所以这篇文章不会包含Vue的基本用法
这篇文章旨在记录使用Vue开发spa(单页面应用程序)过程中的一些坑点，和tip

前言

Vue是一个MVVM框架，所以在DOM操作上由之前的getElementById()操作DOM元素的方式转变为对对象属性的赋值，编写思维需要较大的转变，不过确实使开发便利了不少。

Vue-cli

在熟悉了Vue的基础知识后，可以使用Vue-cli直接创建Vue项目工程，在这里需要注意自己使用node安装的Vue-cli的版本是3.x还是2.x，两个版本的Vue-cli的操作指令还是有所区别，在查询资料的时候需要注意，不然会很容易查错。

Vue-Router

在构建单页应用的时候需要使用到Vue-router插件，这与Vue是分开的，需要另外安装，在安装完成后可以在生成的router.js文件中设置自己的路由。
Vue-router的文档也比较完善，可以在官网查询

ajax

axios

Vue框架并不集成ajax功能，所以需要自己另外寻找ajax模块，我所使用的是axios，还是比较轻便的
在安装完axios后，在main.js添加下列代码

import axios from 'axios'
Vue.prototype.$http = axios;

这样就可以在所有组件中使用this.$http({method:xx,url:xx}).then()来使用ajax功能

属性操作

在ajax请求完后，我们需要根据后端数据来更新响应的前端界面，这时候就会出现一些小坑。
当你这样编写时:

this.$http({
    method: 'get',
    url: '/api/xxx'
}).then(function (){
    相关操作
})

会发现在then()的回调函数中this并不指向组件的Vue对象，也就是无法对Vue对象的属性进行操作。
解决的方法是使用箭头函数()=>{}由于箭头函数会使用上下文的this对象，所以可以操作Vue对象

页面加载时请求

当在Vue对象中写好了ajax请求函数后，需要在页面打开时候就进行请求加载数据，我们可以在Vue对象创建的生命周期created中进行调用

export default {
  name:'',  
  created() {
    this.getArticleInfo();
  }
}

调试

在Vue应用调试的时候还是踩了一些坑。在调试的时候需要接入后端的数据，那么问题来了，使用npm run serve打开的Vue应用与后端程序端口不一致，由于浏览器的同源策略，ajax无法获取到后端的数据。
这个问题有两个解决方法：

1. 把自己Vue应用npm run build，把静态文件放到后端程序中一起调试(无比的傻)，虽然傻，但也是一种办法，只是每次调试的时候都要build一次而已...

2. 设置代理(正确姿势)，创建vue.config.js文件(工程本身可能没有生成，若是生成了可以直接使用)，在其中添加下列代码，设置后端程序的地址端口，旨在将在serve时没有找到的路由转发到设置的地址中。

module.exports = {
    devServer: {
        proxy:"http://localhost:5000"
    }
}

部署

在部署的时候，我的选择是使用nginx在部署静态文件，然后后端(express)另起端口，使用nginx设置代理将相关的后端请求转发。我的后端数据路由全在/api中，所以在nginx中设置

location /api {
    proxy_pass http://127.0.0.1:5000;
}

还有一个点，在部署单页应用的时候，路由为虚拟路由，也就是如果以直接输入url的方式访问除了index的地址时都会404，所以需要在nginx中设置将404交给index.html处理

location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ /index.html;
}