nuxt开发实战-开始

Nuxt.js介绍

Nuxt.js是基于Vue.js的轻量级应用框架，可用来建立服务端渲染(SSR) 应用，也可充当静态站点引擎生成静态站点应用，具备优雅的代码结构分层和热加载等。

服务端渲染

渲染,就是将数据和模版组装成html。因此,服务端渲染就是在服务端上，直接把数据和模版组装成html返回给客户端，客户端只负责解析相关html内容便可。

对Nuxt.js的理解——添砖加瓦

Nuxt.js是基于Vue.js的轻量级应用框架，所谓的应用框架就是在原来的语言语法基础之上进行不断的抽象与封装，暴露出相关的配置、api供业务开发人员进行使用。

Nuxt.js就像是在Vue的基础上创建的一座建筑的外壳。业务开发者是在其（gao）他（ji）开发者的基础上，结合具体的业务在这个建筑外壳中添砖加瓦。（不是同一个层面的开发者，😓）

咱们只是站在巨人的肩膀上，开发难度是很初级的，面向的是用户与业务。对于更加底层的开发逻辑，不是咱们关心的事情。（固然，那些更有技术含量）

所以，对Nuxt的学习的重点在于Nuxt的默认配置、语法规则（对开发者暴露的API、配置规则等）。使用Nuxt时咱们更应该去关注的是业务，而不是技术。越抽象的技术产物离底层更远，离业务更近。

框架可行性评估

截止目前，Nuxt的版本已经更新到2.9.1，star数为2w+，最近commit时间更是在几个小时前。这是一个很是值得推荐的应用框架。

服务端、客户端业务开发

撇开Nuxt，咱们先来说一下常规的服务端、客户端业务的开发方式（这里仅仅介绍的是前端相关知识😝）

对于开发业务而言，咱们须要考虑的是如何进行抽象、共用等，减小业务开发中的重复工做，提升代码的可读性等。

服务端技术解决方案

对于服务端而言，最多见的抽象共用的技术解决方案有如下几种：

• 中间件middleware
• 插件
• 直接引入
  经过npm包引入，或者直接经过路径引入自定义组件/方法等
• 全局变量挂载
  node服务端常见的全局变量是app、context等。咱们能够直接把须要的组件/方法等挂载在全局变量上，直接经过内存访问。

客户端技术解决方案

• 中间件middleware
• 插件
• 全局组件
• 直接引入
  经过npm包引入，或者直接经过路径引入自定义组件/方法等
• 全局变量挂载
  能够直接挂载在window或者Vue实例上

下面开始结合Nuxt来解释以上技术解决方案具体是如何实现的。

开始一个新项目

为了快速入门，Nuxt.js团队建立了脚手架工具 create-nuxt-app

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

$ npx create-nuxt-app <项目名>

或者用yarn ：

$ yarn create nuxt-app <项目名>

它会让你进行一些选择:

• 在集成的服务器端框架之间进行选择: None (Nuxt默认服务器)
• 选择您喜欢的UI框架: None (无)
• 选择您喜欢的测试框架:None (随意添加一个)
• 选择你想要的Nuxt模式 (Universal or SPA)
• 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。

当运行完时，它将安装全部依赖项，所以下一步是启动项目:

$ cd <project-name>

$ npm run dev

应用如今运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，所以在添加新页面时无需从新启动应用程序。

目录结构

• 资源目录

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

• 组件目录

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展加强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

• 布局目录

布局目录 layouts 用于组织应用的布局组件。
若无额外配置，该目录不能被重命名。

• 中间件目录

middleware 目录用于存放应用的中间件。

• 页面目录

页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下全部的 .vue 文件并自动生成对应的路由配置。

• 插件目录

插件目录 plugins 用于组织那些须要在 根vue.js应用 实例化以前须要运行的 Javascript 插件。

• 静态文件目录

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

若无额外配置，该目录不能被重命名。

• Store 目录

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下建立一个 index.js 文件可激活这些配置。

若无额外配置，该目录不能被重命名。

• nuxt.config.js 文件

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

若无额外配置，该文件不能被重命名。

• package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

该文件不能被重命名。

别名

srcDir: ~ 或 @
rootDir: ~~ 或 @@
默认状况下，srcDir 和 rootDir 相同。

例如, 在vue 模板中, 若是你须要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。