• Stars
    star
    102
  • Rank 335,584 (Top 7 %)
  • Language
    JavaScript
  • Created over 7 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🐬 个人技术博客(基于vue的服务端渲染 nuxt.js)

vue服务端渲染博客,基于nuxt

安装

 git clone [email protected]:Hzy0913/my-blog.git

安装包依赖

 npm install

运行

运行发开环境

npm run dev

本地访问 http://localhost:3000

打包部署

tip:生产环境打包需要在服务端进行! 首先打包编译项目

npm run build

运行项目

npm run start

推荐生产环境使用如下命令执行pm2部署

推荐全局安装pm2

第一次部署使用firstserver命令

npm run firstserver

以后每次更新代码执行server命令

npm run server

暂停服务执行stop命令

npm run stop

查看服务状态执行list命令

npm run list

该命令会编译打包项目,然后启动一个pm2守护进程服务,具体可见package中的npm script

项目说明

  • 使用nuxt.js的vue服务端渲染ssr.
  • 使用element-ui 组件库.
  • 使用axios请求库
  • 使用github的Oauth授权登录,评论系统
  • 使用marked解析markdown文档
  • 使用highlight完成代码格式语法高亮

在线预览

See BinLive.

本地预览

想要在本地开发环境运行完整线上模式,可以转发调用binlive线上环境接口。 修改nuxt.config.js文件

// 将下面接口调用地址
proxy: [
  ['/api', { target: 'http://localhost:3080' }]
]
// 修该成binlive线上地址
proxy: [
  ['/api', { target: 'http://binlive.cn:3080' }]
]

修改plugins/axios.js文件

// 将下面接口调用地址
if (process.server) {
  options.baseURL = 'http://localhost:3080'
}
// 修该成binlive线上地址
if (process.server) {
  options.baseURL = 'http://binlive.cn:3080'
}

commit

由于spa对于seo不友好,重构了之前使用vue的spa形式的博客,使用nuxt.js

博客后端

博客的后端以及后台管理系统项目为博客后端项目。

More Repositories

1

mpvue-calendar

📅 A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...
Vue
515
star
2

Timetable

📆 timetables.js plugin, timetable schedule school-timetable 课程表 大学课表 日程表 插件
JavaScript
217
star
3

blog-server

基于koa2的服务端,vue的后台管理系统 🌐
JavaScript
58
star
4

chat-react

💬 The chat UI component for React
JavaScript
53
star
5

arc-progress

🐳 Arc circular animation progress bar drawn by canvas, you can used in the react component, or no dependence.
TypeScript
49
star
6

build-react

🛠️ build-react react-cli 构建react项目的脚手架工具
JavaScript
34
star
7

Mavatar

avatar upload for mobile 移动端头像上传插件 Mavatar.js
JavaScript
31
star
8

LiveNode

node web service 基于node的web服务生成脚手架工具
JavaScript
28
star
9

gulp-push

一行gulp命令完成编译并push文件到代码仓库
JavaScript
13
star
10

redux-order

redux middleware asyn promise 简化redux的异步流控制处理的中间件
JavaScript
7
star
11

gulp

gulp压缩文件,自动刷新
JavaScript
7
star
12

vue-imageClip

vue image clip 基于vue的图片裁剪组件
Vue
6
star
13

react-project-Instructions

react项目说明
JavaScript
6
star
14

utils

javascript utils helpers
JavaScript
3
star
15

react-template

react-cli project template
JavaScript
2
star
16

react-number-animate

react number animate text animation
1
star
17

qr-call-webpack-plugin

A webpack plugin of Call the terminal to output QR code through the browser console
JavaScript
1
star
18

hanlibrary

some files
1
star
19

build2webpack

webpack build react
JavaScript
1
star
20

livenode-cli

node web service cli
JavaScript
1
star
21

eslint-plugin-fly

eslint-plugin
JavaScript
1
star