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,可以直接通过这个地址访问