# nuxt-web

**Repository Path**: wilkwo/nuxt-web

## Basic Information

- **Project Name**: nuxt-web
- **Description**: 基于nuxtjs2.0 、 element-ui开发的博客系统。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://www.dsiab.com
- **GVP Project**: No

## Statistics

- **Stars**: 26
- **Forks**: 14
- **Created**: 2021-05-09
- **Last Updated**: 2025-04-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Nuxt, Vue, Less, JavaScript, Element-UI

## README


<div><a href="https://github.com/esplori/nuxt-web/blob/master/README.md">中文</a>  |  <a href="https://github.com/esplori/nuxt-web/blob/master/README.en.md">ENGLISH</a></div>

<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">nuxt-web</h1>
<h4 align="center">基于nuxtjs开发的博客系统</h4>
<p align="center">
	<a href="https://gitee.com/wilkwo/nuxt-web.git"><img src="https://gitee.com/wilkwo/nuxt-web/badge/star.svg?theme=dark"></a>
	<a href="https://gitee.com/wilkwo/nuxt-web.git"><img src="https://gitee.com/wilkwo/nuxt-web/badge/fork.svg?theme=dark"></a>
</p>


### 项目介绍：

- 主要技术: nuxtjs 2.0 、element-ui 2.0

- 主要使用插件： axios、 less 、 highlight.js、 component-cache
  
 - 加qq群一起交流：514450699



### 关联项目

* 后台管理项目： <a href="https://gitee.com/wilkwo/vueAdmin">vueAdmin</a>

* 后台管理地址：http://admin.dsiab.com

- 体验账号： test / test
  

### 演示地址

* 官网：[https: //www.dsiab.com](https://www.dsiab.com)



### 选择nuxt的原因：

- nuxt开发的项目能被搜索引擎收录,能进行seo。

- 上手简单，语法跟vue一致，部分写法有差异，只需要将文件按目录新建好，nuxt会自动生成对应路由。

- 能正常接入统计跟广告代码


### 不足

- element-ui部分功能对搜索引擎及seo不够友好，部分组件需要手写或者在element-ui的基础上做修改。比如菜单部分、分页组件都需要进行修改，因为没有a链接, 而a链接对搜索引擎比较友好。本项目有重写分页组件，方便seo,当然你也可以选择其他组件库或者不用组件库。


### 提升加载性能


- 某些时候某些接口并不需要都在服务端渲染，可以在浏览器渲染。比如目前首页列表是服务端调用渲染，右侧菜单的推荐跟分类是浏览器渲染，即跟正常的ajax调用一样

- 注意浏览器调接口需要配置nginx反向代理，具体可参考：https://www.dsiab.com/post/4421

- 本项目使用@nuxtjs/component-cache 提升加载性能


### 如何启动应用

```bash

# 下载代码

github: git clone https://gitee.com/wilkwo/nuxt-web.git

或者

gitee: git clone https://github.com/esplori/nuxt-web.git

# 安装依赖
$ npm install
# 本地启动在 localhost:3000
$ npm run dev
# 部署到服务器，先build，再执行start启动
$ npm run build
$ npm run start
# 生成静态项目
$ npm run generate
```
### 注意

- 默认调用官网接口，数据跟官网同步
  
- 如果要使用本地接口，请修改/plugins/baseUrl.js 文件中的baseUrl
  
- 如果想要在浏览器端调用接口，请修改nuxt.config.js文件中的proxy, 将对应接口转发至本地服务即可


### 感谢赞赏

创作不易，你的赞赏和认可是持续更新的动力！

<img src="./assets/img/zanshan.jpeg" alt="赞赏" width="400px" />