为什么学习并使用Vue

1.发展趋势

最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,号称兼具了 angularjs 和 reactjs 的两者优点。

2.Vue能干吗

移动端的上网需求已经远高于pc端,特别是 hybrid 方式的H5应用中,但是性能问题一直是痛点。 如果使用 SPA(就是俗称的单页应用(Single Page Web Application)),SPA它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验。

陆续续看vue已经二个多月了,3月份使用vue2.0开发了一个简单的博客,在用vue人性化优势的同时,的也遇到过很多坑,很多问题,分享一下我遇到的问题和解决办法

Vue2_blog

vue2,vuex,vue-cli,axios,webpack,express,MySQL

Build Setup

# install dependenciesnpm install# serve with hot reload at localhost:8080 (本地启动)npm run dev# build for production with minification (生成静态文件,用于打包上传服务器)npm run build1234567812345678

主要实现的功能

1.用户登录

2.用户注册

3.用户发帖

4.用户评论帖

5.用户留言

构建

使用vue-cli来构建初始化项目,非常方便,相当于生成项目模板这样子。

vuex

vue就我个人理解,是数据驱动,实现页面组件化开发,更好管理和维护,vuex是用作组件间的通信,当然了如果页面够简单,也可以使用其他方法进行通信(传值),比如props等。

axios

说实话,项目前期我还用的是vue-resource,后面才统一改用axios(尤大大本人都力推的),二者都是用于客户端和服务端通信的,也就是用作ajax请求的。

webpack

webpack是一款模块加载器兼打包工具,它能把各种资源,例如js(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。比如,我们vue组件化开发,会用 “.vue” 文件,这种文件不会被浏览器所解析,所以需要用webpack来 “格式化” 他们,让他们变为浏览器可以解析的文件格式。还有,还有,用webpack,你就可以愉快的使用es6的语法啦!

express & mysql

所谓一个”系统”,怎么只能是简单的静态页面?在这里用了express(express 是一个基于 Node.js 平台的开发框架)和mysql来进行编写数据存储的后端api,用于用户信息在数据库里存储和读取。

pm2

pm2 是一个带有负载均衡功能的Node应用的进程管理器,并保证进程永远都活着,0秒的重载。按照我的理解,通俗的将,它的作用就是,本地开发环境,你要开启node服务,实现某些功能(比如监听某个端口),就会在控制台执行”node app.js”(比如这个文件叫app吧!),对应的node服务就会开启了,但是你只要一关闭这个控制台窗口,他就没有对应的服务进程了,每次起服务都得”控制台 -> node app.js”。在生产环境来说,很麻烦,这会就用到了pm2,只需要执行一次”pm2 start app.js”。ok,一劳永逸,控制台窗口随你怎么自由开启关闭,对应的服务进程永远在后面运行着。

Github地址

Github源码

项目预览

Vue_blog(只适配了移动端)

总结

刚用vue开发的时候,遇到了很多问题,也犯了很多错误,不过,现在而言,自己收获蛮多。自己的vue博客(留言板)已经开发完成。我想说的是,麻雀虽小,五脏俱全,虽然只是一个小应用,但它涵盖了许多知识点,包括前端,后端,数据库等一个网站的所必须的一些组成要素,对我来说,学习意义很大,愿共勉!

转载于:https://blog.51cto.com/alloyteamzy/1944777

Vue 全家桶 + Express 实现的博客(后端API全部自己手写)相关推荐

  1. Vue 全家桶 + Express 实现的博客

    为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,AngularJS 已成昨日黄花,reactjs 如日中 ...

  2. 《vue全家桶》移动端博客-文章推荐(3)

    1.需求 2.数据准备 3.前端数据实现 在图片加载中实现了懒加载 v-lazy 需要安装vue-lazyload  npm install vue-lazyload --save 在main.js加 ...

  3. vue全家桶+koa2+mongoDB打造全栈社区博客

    背景 一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客. 简介 这是 ...

  4. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  5. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vu ...

  6. Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ

    Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...

  7. Vue 全家桶 + Electron 开发的一个跨三端的应用

    GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...

  8. Vue 全家桶 + Electron 开发的一个跨三端的应用 1

    代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  9. vue+node+mongodb 搭建一个完整博客

    Vue + Node + Mongodb 开发一个完整博客流程 前言 前段时间刚把自己的个人网站写完, 于是这段时间因为事情不是太多,便整理了一下,写了个简易版的博客系统 服务端用的是 koa2框架 ...

最新文章

  1. 测试服务命名和动态注册路由的方式@Xan
  2. @scheduled cron动态修改_spring boot实现动态增删启停定时任务
  3. vue 嵌套表格组件_vue+element中表格嵌套怎么做?
  4. java监听双按键_java 键盘监听 按一次键监听到两次
  5. 2013 Multi-University Training Contest 4 部分解题报告
  6. C#反射技术的简单操作(读取和设置类的属性)
  7. BIOS、BootLoader、uboot对比
  8. selenium之时间日期控件的处理
  9. 第0期-前言-学习软件测试是否需要培训
  10. 404 Not Found [IP: 91.189.91.39 80] 解决办法:换源,还是换源 !!
  11. intelx79服务器芯片组,流言终结者!Intel X79规格全面介绍
  12. 有利可图网_公布有利可图的辅助项目手册
  13. java 二维码生成和加密base64压码
  14. DIY基于RTD2662的LVDS屏幕驱动
  15. 计算机共享文件误删怎么恢复,删除计算机回收站中的文件后如何恢复知识共享...
  16. Java中Double保留自定义小数位的几种方法
  17. 2022,AIGC元年?
  18. 数字化校园如何高效运维
  19. wifi p2p本机设备名DeviceName设置
  20. WPF生活助手 源码下载 原文-http://www.xuzhiheng.cn/Home/Article/Details?Id=8

热门文章

  1. server2008 sql 账号只读权限_SQL Server 2008数据库创建用户只读权限的两种方式(转载)...
  2. nginx 上传文件漏洞_nginx解析漏洞复现
  3. java socket通信安全_Java Socket通信
  4. 12v小型电机型号大全_伊藤8KW静音柴油发电机YT8100T型号规格
  5. java i 线程不安全_java中的++i是线程安全的吗?
  6. java静态代码块的作用域_java基础之面向对象
  7. hubliderx如选择相同单词_高考英语,十六种高效单词记忆法,建议人手一份!
  8. websocket服务器响应头,从服务器发送响应握手后,websocket.onopen不会触发
  9. php视频流传输,视频流传输协议RTP/RTCP/RTSP/HTTP的区别
  10. 北航计算机和上财金融,这所985财经学府,不招本科生,隐藏实力却已超过上财、央财?...