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 无法获取到后端的数据.
这个问题有两个解决方法:
把自己 Vue 应用 NPM run build, 把静态文件放到后端程序中一起调试(无比的傻), 虽然傻, 但也是一种办法, 只是每次调试的时候都要 build 一次而已...
设置代理(正确姿势), 创建 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;
- }
来源: http://www.jianshu.com/p/d0d97b89c510