/gian-blog

Gian's blog

Primary LanguageVueMIT LicenseMIT

nuxtjs markdown-it markdown-it markdown-it highlight.js vue-infinite-loading vue-infinite-loading

欢迎 😁star,fork,watch⭐~

相关项目

  1. gian-blog-admin 管理端站点
  2. gian-blog-api 服务 API

关于本博客

个人用来记录学习,工作

首页/列表页效果图(多图预警!!!😁)

响应式

gif效果图

宽度<=419px

lte419效果图


420px=<宽度<=749px

420to749效果图


750px=<宽度<=899px

750to899效果图


宽度>=900px

gte900效果图


归档页效果图

归档页效果图


标签页效果图

标签页效果图


查询页效果图

查询页效果图


详情页效果图

详情页效果图


技术栈

  • nuxtjs(ssr)
  • @nuxtjs/axios
  • @nuxtjs/markdownit
  • @nuxtjs/proxy
  • highlight.js
  • vue-infinite-loading
  • sass

开发步骤

  1. 安装本项目依赖的API

  2. 打开命令行终端并进入项目根目录

  3. 创建.env 文件 cp .env.demo .env

  4. 更新.env 文件中的环境变量:

    NUXT_ENV_API_HOST=运行 API 的主机 IP

    NUXT_ENV_API_PORT=API 运行端口

    CLIENT_ID=API 端配置的客户端编号

    CLIENT_SECRET=API 端配置的客户端密钥

  5. 安装项目依赖,终端里运行 npm i or yarn

  6. 开始吧 😁,终端里运行 npm run dev or yarn run dev

生产模式下运行

npm run build && npm run start or yarn run build && yarn run start

pm2 部署

bash start.sh

再次欢迎 😁star,fork,watch⭐~