从壹开始先后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础：框架初探

时间  2019-11-05 标签 开始 后端 分离 vue netcore 补充 教程 二七 nuxt 基础 框架 初探

缘起

哈喽你们好，又是周四了，俗话说周四来了，周末还远么哈哈，老张我也想下周请假，来个16天的大长假哟，不知道你们是怎么请假的，近来发现文章下边已经没有人评论了，赶脚比较凄凉了，你们看到的麻烦点个赞呀说个话呀，增长下人气哈哈，刚刚忽然想到原来问题都跑到群里了，也是，当初建立群的目的就是解决问题滴，不能本末倒置了 [ 苦笑 ]，通过一个月的书写《.net core(13)》、《Vue学习(13)》上下两部入门教程已经结束，今天开始一个 Vue 的补充教程 —— Nuxt.js 一个基于 Vue 应用的 SSR 教程，由于这个系列教程是辅助 Vue 的，可是又不属于咱们以前的正规系列教程里，因此我就暂时命名为补充教程吧，若是说你接触过这个呢，说明你的 vue 已经很好了，至少是已经搭建过 vue-cli 脚手架的项目了，若是说没有用过 Nuxt.js 那正好能够一块儿来看一看，我我的赶脚Vue的SSR是一个趋势，因此仍是多说一说吧，若是你还对 SSR 不了解，或者是第一次看个人系列教程，请换传送门《 二十五║初探SSR服务端渲染（我的博客二）》和《二十六║Client渲染、Server渲染知多少{补充}》。好啦开始今天的讲解css

最终我们会一步步开发咱们的第二个项目 —— 基于 Nuxt 的我的博客 动图html

 这个博客项目已经发布：http://123.206.33.109:26898/前端

我还有一个nuxt 的项目，是提bug 的，也能够看看 http://www.javashuo.com/article/p-pawscobz-z.htmlvue

零、今天要实现粉色的部分

 

1、Vue 的前世此生 —— 注定会推出 Nuxt.js

一、Vue —— 从不知不觉到后知后觉

MV* 发展初期，先后端分离成为可能，各类项目框架如雨后春笋通常，所有都出现了，一直平静的前端慢慢的走进你们的视野，那个时候不是简简单单的切图画页面，而是开始考虑如何用面向对象的思惟开发，当时你们还热衷于 Jquery 没法自拔，时间在那个时候是2012年以前；node

2012年，36氪记者采访了尤大大，并发了一篇文章其中有这么一句话：“Evan 但愿能经过这个举动引发科技公司的注意，向他伸出橄榄枝。”，并附上了做者尤雨溪的微博、Twitter 与我的网站。做者的作法，我以为你们应该借鉴，掌握好 Vue.js，让你心仪的公司注意到你。webpack

针对知乎上关于 Vue.js 的一个提问，尤雨溪的回答说出了最初的开发初衷，即“作 Vue.js 的初衷很单纯，不是为了赚大钱，不是为了成为大神，也不是由于我发现了什么不得了的创新点。我只是想作一个我本身会喜欢的框架。很巧，我把我想要的东西作出来之后，也有不少其余人喜欢，因此用户愈来愈多。我从没说过，也不认为 Vue.js 比全部其余框架都好（我一直的观点都是开发者偏好的多样性使得多框架/语言的共存有益无害，甚至是必要的） 。”git

这个时候 Vue 还仅仅是一个无名小卒，虽然搭上了 MV* 的顺风车，只不过尚未正式起飞。github

又过了三年，2015年开始，在各大论坛技中，与 Vue.js 这一相关词语的内容爆炸式增加，在前端技术增速中独领风骚，迅速成为前端三巨头之一。记得在某个社区中有人这样介绍三巨头“来自 Google 的 Angular，来自 Facebook 的 React，来自开源社区的 Vue.js”，虽然你们如今仍是经过百度发现vue的市场占用量较少，可是它快速发展的势头依旧势不可挡。web

 

在 2016 年，Vue 已经正式崛起，开始出如今了某些公司，某些大厂也开始使用，而且也依旧与 React 、NG并肩飞奔。vue-router

 

二、Vue的快速发展，必将 Nuxt 推上历史舞台

虽然 vue 开发速度很快，可是也是一直在更新，完善和发布，最大的一个问题就是——如何解决SEO的问题，这是全部 MV* 所面临的一个共同的问题，你们也一直在摸索。若是不尝试改变，这个历史问题会随着自身的快速发展而变得愈来愈严重，到时候会成为一个严重的短板效应，可是又不能回到 web1.0 时代，那样 先后端分离会成为一个失败品。如何更好的推出 SSR 服务，成为历史必然趋势。

直到2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 殊途同归，一个基于 Vue.js 的服务端渲染应用框架应运而生，咱们称之为：Nuxt.js。这固然是历史上的一个重要进步，两大前端架构同时解决了这个历史问题，

 

2、Nuxt.js 是什么？

来自官方的讲解：

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

经过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

咱们的目标是建立一个灵活的应用框架，你能够基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所须要的各类配置。

除此以外，咱们还提供了一种命令叫：nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

咱们相信这个命令所提供的功能，是向开发集成各类微服务（microservices）的 Web 应用迈开的新一步。

做为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

它集成了 Vue 2.0 、vue-router、和 vuex（固然这个不是必须的），在 vue-cli 脚手架开发过程当中，咱们会经过 webpack 进行项目打包构建工做，因此咱们会每次开发好，进行打包，可是Nuxt.js 是使用 webpack 和 vue-loader来自动化处理构建工做，还记得我们上一篇文章中提到了，咱们经过 webpack-server.js 来手动打包生成能够运行在 node 环境的服务器捆绑渲染器，而后 开启服务，就能实现服务器渲染了，在这里 Nuxt.js 为咱们自动化的处理了这个过程，原理你们应该都清楚了。

特性以下

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能，支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint

因此，这个框架是基于 vue 开发的，你们必定须要有必定的 vue 开发基础，接触 nuxt 框架才能更加驾轻就熟。

 

3、使用 Nuxt 搭建咱们的 blognuxt 项目

一、搭建新手模板

执行命令

vue init nuxt-community/starter-template blognuxt
//或者采用如今官方的安装方案
npx create-nuxt-app 项目名

而后简单对项目进行三项配置，一直 Enter 就行。

 

而后就发现咱们的项目已经安装好了，下面重点说一下这些文件的含义。

 

若是采用官方的这个新的安装方案，能够看这里

 

二、项目结构分析

 

├── assets                         // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript
├── components                     // 组件。用于本身编写的Vue组件，好比滚动组件，日历组件，分页组件
│   └── AppLogo.vue                // 默认logo组件
├── layouts                        // 布局。页面都须要有一个布局，默认为 default。它规定了一个页面如何布局页面。全部页面都会加载在布局页面中的  标签中。
若是须要在普通页面中使用下级路由，则须要在页面中添加 。该目录名为Nuxt.js保留的，不可更改。
│   └── default.vue                // 默认模板页面
├── middleware                     // 中间件。存放中间件。能够在页面中调用：  。
├── pages                       　 // 页面。一个 vue 文件即为一个页面。index.vue 为根页面
│   └── index.vue                  // 默认首页面
├── plugins                        // 用于存放JavaScript插件的地方
├── static                         // 用于存放静态资源文件，好比图片
├── store                       　 // 用于组织应用的Vuex 状态管理。
├── .editorconfig                  // 开发工具格式配置
├── .eslintrc.js                   // ESLint的配置文件，用于检查代码格式
├── .gitignore                     // 配置git不上传的文件
├── nuxt.config.js                  // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
├── package.json                    //npm包管理配置文件
└── README.md                       // 说明文档<nuxt /><nuxt-child />middleware: 'middlewareName'

layouts: 布局。页面都须要有一个布局，默认为 default。它规定了一个页面如何布局页面。全部页面都会加载在布局页面中的 <nuxt /> 标签中。若是须要在普通页面中使用下级路由，则须要在页面中添加 <nuxt-child />。该目录名为Nuxt.js保留的，不可更改。。
pages: 页面。一个 vue 文件即为一个页面。index.vue 为根页面。

若须要二级页面，则添加文件夹便可。无需配置路由
若是页面的名称相似于 _id.vue （以 _ 开头），则为动态路由页面，_ 后为匹配的变量（params）。
若变量是必须的，则在文件夹下创建空文件 index.vue。更多的配置请移步至 官网 。
plugin: 插件。用于组织那些须要在 根vue.js应用 实例化以前须要运行的 Javascript 插件。须要注意的是，在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个钩子方法会在 客户端和服务端均被调用。其余钩子方法仅在客户端被调用。
static: 静态文件。放置不须要通过 webpack 打包的静态资源。如一些 js, css 库。

生成了不少文件夹，经过总体结构，你们能够看出来，项目又一次被精简了，从 vue-cli 2.0 到 vue-cli 3.0 我们的项目结构是一直在精简，主要都封装起来，经过依赖包进行处理，这愈来愈像我们以前的 .net core api 了。

 

三、安装依赖并运行

 执行 npm install 安装咱们的依赖包

npm install

而后执行 npm run dev，运行项目

 npm run dev

这个上半部就是咱们的 components 文件下的 AppLogo.vue 实现的动态效果。

 

四、修改下pages 下的 index.vue 页面，实现 hello 

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        欢迎：老张的哲学
      </h1>
      <h2 class="subtitle">
        一个 nuxt 工程
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">博客园</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'//统一使用 波浪线~ 来代替 斜杠/

export default {
  components: {
    AppLogo
  }
}
</script>

这些内容你们必定就是很熟悉了，若是开发过 vue 的话，项目直接执行咱们的修改，查看浏览器

你们能够看出来，不只咱们的页面渲染了，咱们的项目源代码也把内容渲染出来了，这样就达到了咱们的SSR 服务端渲染的目的。那具体是如何运行的呢，明天我们深刻了解下其中的原理。

 

 4、结语

 好啦，今天就暂时说这么多吧，后边还有不少知识点，今天我们简单了解了下这个 nuxt.js 框架，明白了安装过程，已经项目结构的基本骨架，固然这仅仅是九牛一毛，nuxt 做为一个框架，虽然说是依赖于 vue 之上，可是仍是有本身的东西，好比动态路由，中间件，异步数据，状态树，视图等等等等，这些我们都会在之后说到。明天会重点说下 nuxt 的运行原理

 

 5、CODE

这是刚刚建立的空的框架，之后就在这基础上封装搭建了。

https://github.com/anjoy8/Blog.Vue.Nuxt

联系我们 沪ICP备13005482号-10