Nuxt.js简介及初始化过程

Nuxt简介

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
使用服务器端渲染，我们可以获得更快的内容到达时间，让用户得到更好的体验。

Nuxt搭建环境

为了方便大家快速使用，Nuxt提供了一个starter模板，可以直接下载模板的压缩包
压缩包链接： 下载链接
把压缩包下载后解压修改里面的package.json文件里的name、description、author

修改nuxt.config.js的title: ‘{{ name }}’、content: ‘{{escape description }}’

修改完这几个后使用终端下载安装依赖
终端命令：Npm install

Nuxt目录结构

assets:资源目录,用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
components:组件目录
layouts:布局目录,用于组织应用的布局组件
middleware :用于存放应用的中间件
pages:页面目录,用于组织应用的路由及视图,Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置
plugins:插件目录
static:静态文件目录
Store :用于组织应用的 Vuex 状态树 文件
nuxt.config.js:用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置
package.json:用于描述应用的依赖关系和对外暴露的脚本接口

启动效果

依赖下载完后就可以启动了
启动命令：npm run dev
启动过程如下：

启动以后，项目默认运行在http://localhost:3000，可以直接通过这个地址访问