继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue + node 搭建博客后记

哈哈哈但我却完全
关注TA
已关注
手记 1
粉丝 3
获赞 12

例行吐槽
学习前端方向的知识也有两个月了,本着总结前面学过的知识点的目的,加强对它们的基础巩固,我计划做三个小项目预计一个月完成,这个项目原本是打算做一个个人星座网站(个人爱好),但是我之前无意中在一个前端群中发现一个人竟然有个人博客,点进去看了下,哇,他也学了两个月,就可以做出博客,那我为什么不试试也做一个呢,反正都是实践小项目。
但是,万万没想到,我在逛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文件的同级文件夹

阿里云:直接上官网购买,买云服务器才有系统后台才能部署node,别选了虚拟主机,当然你要是不用node部署,那可以买虚拟主机。
把你的文件夹复制到阿里云服务器的系统

用cmd命令板进入你的文件夹
node (你的node文件).js
在浏览器打开你的网页,输入你的域名就可以看到你的网站啦,24小时在线的那种噢

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP

热门评论

老哥给个新的网址。域名到期了。

你的博客进不去 。。。

查看全部评论