首页手记 vue + node 搭建博客后记

vue + node 搭建博客后记

标签：

Node.js JavaScript

例行吐槽
学习前端方向的知识也有两个月了，本着总结前面学过的知识点的目的，加强对它们的基础巩固，我计划做三个小项目预计一个月完成，这个项目原本是打算做一个个人星座网站（个人爱好），但是我之前无意中在一个前端群中发现一个人竟然有个人博客，点进去看了下，哇，他也学了两个月，就可以做出博客，那我为什么不试试也做一个呢，反正都是实践小项目。
但是，万万没想到，我在逛github时看见了hexo，才发现那位朋友的博客是hexo的模板，然后问下他，他说这个博客很容易搭建呀，用hexo加上github的仓库就行，一小时的事，不用写代码。我的天，为什么等我做完才让我知道真相，算了，反正都是实践，有进步就行。
博客地址
http://www.thirdaurora.me/
搭建详细
框架选用
个人觉得博客用单页面可以hold得住，所以就在我会的框架里选了vue，有它的组件功能做单页面应用再好不过，而后端我只会node.js所以最后决定：JS原生 + Vue全家桶 + node
技术具体
服务器：阿里云(github仓库毕竟还是免费的适合开源展示，还是自己租个)
前端：JS原生、Vue全家桶(JS原生毕竟才是主角，vue不用做的都用JS原生)
后端：node.js(模板有express、mysql,中间件有cookie、session、body-parser)
数据库：服务器本地mysql，用Navicat for MySQL管理
构建工具：webpack(用的是vue-cli脚手架)
项目配置
首先你得会简单的node的npm(国外)或者淘宝镜像cnpm（国内）操作。
webpack脚手架配置
npm install vue-cli -g（全局安装的意思，以后不用再下载）下载vue脚手架
vue init webpack name（你想生成的文件夹名字)
cd name（你刚刚生成的文件夹名字，进入文件夹) npm install 下载它需要的模板
npm run dev 等会就会弹出网页，也可以自己访问localhost:8080
用你学到的Vue知识写代码搭建博客网页。
最后 npm run bulid 压缩代码你的文件夹就会多出dist文件，那个就是你的前端网页。
node部署

大致的配置，这个.js文件放在dist文件的同级文件夹