{"repo":"zhangquanming/nuxt-blog","free":true,"listed":false,"github":"https://github.com/zhangquanming/nuxt-blog","clone":"git clone https://github.com/zhangquanming/nuxt-blog.git","description":"采用 Nuxt.js 实现一套 ssr 博客系统，支持 macdown 边写作边预览。","language":"Vue","stars":11,"topics":["nuxtjs","markdown","ssr"],"license":null,"category":"productivity","readme_excerpt":"Nuxt 开发个人博客 [toc] 众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案。 服务端渲染 (SSR) 就是常用的一种。 SSR 有利于 搜索引擎优化(SEO, Search Engine Optimization) ，并且 内容到达时间(time-to-content) （或称之为 首屏渲染时长 ）也有很大的优化空间。 Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建 服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。 初始化项目 运行 create-nuxt-app 通过 Nuxt 官方提供的脚手架工具 create-nuxt-app 初始化项目： // 或者 项目配置 项目创建的时候会让你进行一些配置的选择,可根据自己需要进行选择。 项目运行 运行完后，它将安装所有依赖项，下一步是启动项目： 在浏览器中，打开 http://localhost:3000 目录结构 项目开发 项目启动之后，我们就可以进行开发阶段了。 创建页面 在 pages 创建页面文件： Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。所以不需要再安装 vue-router 了，他会依据 pages 目录结构自动生成 vue-router 模块的路由配置。页面之间使用路由，官方推荐使用 标签，与 的使用方式是一样的。上面创建的目录结构将会生成对应的路由配置表： 组件部分 组件这一块划分为 base 、 framework 、 page 三个目录： 这里需要注意在开发 VUE SPA 应用时我们有时候会把页面组件放在 pages 下，我将页面下的组件全部放到了 components 下，因为 Nuxt.js 框架会读取 pages 目录下所有的 .vue 文件并自动生成对应的路由配置。 资源的存放 官方介绍的很详细，资源的存放有两个目录： static 、 assets static : 用于存放应用的静态文件，此类文件不会调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。 举个例子: /static/banner.png 映射至 /banner.png assets : 用于组织未编译的静态资源如 LESS 、 SASS 或 JS 。 别名 别名 目录 --- --- 或 @ srcDir 或 @@ rootDir 为了方便引用，nuxt 提供了两个别名，如果你需要引入 assets 或者 static 目录, 使用 /assets/your image.png 和 /static/your image.png 方式。 全局样式 这里我选用 LESS 预处理语言，安装： 在 assets/css/ 创建 .less 文件, 通过一个文件引入： 在 nuxt.config.js 中引入 LESS 全局变量 在使用预处理语言的时候，我们肯定会使用到变量，以方便统一管理颜色、字体大小等。 首先定义好变量文件 variables.less 安装： 在 nuxt.config.js 中增加配置： 布局layouts 我的博客大概分为这几种布局方式： 在这里我创建了三种布局组件： admin.vue : 后台管理模块的布局 user.vue : 个人中心模块的布局 default.vue : 默认的布局 拿 default.vue 举例，我把 导航 和 页脚 放到了一个组件 AppLayout ","default_branch":null,"files":null,"tree":[],"storefront":"/r/zhangquanming","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/zhangquanming/nuxt-blog/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}