哈喽大家好！又是元气满满的周~~~二哈哈，不知道大家中秋节过的如何，马上又是国庆节了，博主我将通过三天的时间，给大家把项目二的数据添上（这里强调下，填充数据不是最重要的，最重要的是要配合着让大家明白 nuxt.js 是如何一步步实现服务端渲染的），虽说是基于 Nuxt 的，但是数据源还是我们的老数据，就是 .net core api 的数据，和上一个项目中使用的是一样的，这里要说下，有的小伙伴说想要我的数据，这里暂时说抱歉，因为里边有一些我的私人的记录，还有一些网站密码啥的，我自己懒得一条一条的删除了，这里就不放出来了，多多包涵，有源代码和数据库表结构，相信大家还是可以搞定滴，因为是三天，所以今天我们就会把首页给处理出来，这里有俩个点，第一，为什么是三天呢，因为博主三天后要放假了哈哈（ 这里要给大家说下心得，坚持学习和坚持写博客是完全不同的时间量，每天我光写博客的时间最少三个小时，加上工作的九个小时，每天我至少需要12个小时，所以如果想快速学习，建议还是要好好的写博客 ），第二，数据获取和之前的 vue 有点儿差别，虽然都是基于 axios ，但是 nuxt 框架做了一定的封装，而且还是异步的，ASync/Await ，大家看我今天的标题也能看的出来，至于为什么会是异步的呢，先留个神秘，大家看完今天的讲解应该就知道是为什么了~
书接上文，上周咱们说到了nuxt 的运行原理《二八║ Nuxt 基础：面向源码研究Nuxt.js》，不知道大家是否看了呢，主要通过源码的分析，来重点说明 Nuxt 是如何实现服务端渲染的，个人感觉写的比较羞涩难懂，我也是在慢慢的润色，尽量修改成通俗易懂的给大家展示，写成人话。这里我要说句题外话，大家有时间的话，还是应该把后端的注意力拿出来一点儿点儿放到前端了，以前我也是一个老后端，一直想着各种持久化ORM哪个更帅，各种框架哪个性价比更高，但是一直也技术平平，反而忽略了这两年的前端发展，经过这一个月的学习，我发现前端技术竟然发展如此之快，竟超出我的想象，有点儿追赶挑战后端的意思了，多语言化的发展，更有助于一个程序员的发展（ 这个欢迎来喷，只会一种语言的话，嗯~ 会有局限性┑(￣Д ￣)┍ ），哈哈这个扯的有点儿远了。
对于昨天的文章，总结来说，nuxt 的核心就是在 vue.js 的基础上，封装了双端渲染模式（服务端和客户端），结合页面html片段缓存，来实现 s-s-r ，最终解决首屏快速渲染和 SEO 的问题，核心就是在如何实现双端渲染上，大家之前的教程中，对 Vue 的 SPA 很熟练了，这三天咱们就慢慢的研究下，如何实现双端渲染的，这个也就是我讲 nuxt 的核心 —— 渲染。
零、今天要完成蓝色的部分
一、重点温习框架中的几个部分文件 —— 铺垫 1、nuxt.config.js 文件
项目的核心文件，作为一个配置文件，对全局配置起到一个十分重要的作用，像我们的 webconfig 一样
//这些配置在你的项目里可能不一定都有，但是我都会提到 module.exports = { cache: {}, css: [ // 加载一个 node.js 模块 // 'hover.css/css/hover-min.css', // // 同样加载一个 node.js 模块，不过我们定义所需的预处理器 // { src: 'bulma', lang: 'sass' }, // // 项目中的 CSS 文件 // '~assets/css/main.css', // // 项目中的 Sass 文件 // { src: '~assets/css/main.scss', lang: 'scss' } // 指定 scss 而非 sass ], // 默认 true dev: process.env.NODE_ENV !== 'production',//不是生产环境 // 创建环境变量 env: {}, // 配置 Nuxt.js 应用生成静态站点的具体方式。 genetate: { dir: '', minify: '', routes: [], }, /* * vue-meta * Headers of the page */ head: { title: '老张的哲学', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress bar color */ loading: { color: '#3B8070' }, /* ** Build configuration */ build: { /* ** Run ESLint on save */ extend (config, { isDev, isClient }) { if (isDev && isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } }, performance: { gzip: false, prefetch: true }, // 引入 Vue.use 的插件 plugins: [], // 默认当前路径 rootDir: process.cwd(), router: { base: '', mode: 'history', linkActiveClass: 'nuxt-link-active', scrollBehavior: (to, from, savedPosition) => { // savedPosition 只有在 popstate 导航（如按浏览器的返回按钮）时可以获取。 if (savedPosition) { return savedPosition } else { let position = {} // 目标页面子组件少于两个 if (to.matched.length < 2) { // 滚动至页面顶部 position = { x: 0, y: 0 } } else if (to.matched.some((r) => r.components.default.options.scrollToTop)) { // 如果目标页面子组件中存在配置了scrollToTop为true position = { x: 0, y: 0 } } // 如果目标页面的url有锚点, 则滚动至锚点所在的位置 if (to.hash) { position = { selector: to.hash } } return position } }, // default middleware: 'user-agent', // 扩展路由 extendRoutes: () => {}, // 默认同 rootDir srcDir: this.rootDir, transition: { name: 'page', mode: 'out-in' }, watchers: { chokidar: {}, // 文件监控 webpack: { aggregateTimeout: 300, poll: 1000 } } } }