作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR
安装流程
Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli，安装过的忽略此步
npm install -g vue-cli
完成后在需要创建的目录下执行以下
vue init nuxt/starter <project-name> cd <project-name> npm install
依赖安装完成后
npm run dev
打开浏览器 http://localhost:3000
说明：Nuxt.js 会监听 pages 目录下的改变，添加新 page 的时候不需要重启服务
目录结构
完成上面命令后你的目录结构会如下
Nuxt.js 给出了最简单的目录结构
|-- pages |-- index.vue |-- package.json
也就是说，至少需要一个 page 来作为展示页。
文件的路径建议都采用绝对路径，表格如下
例：怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片
<img src="~static/img/logo.png" alt="Logo"/>
路由
Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构
例1:
|-- pages
|-- posts
|-- index.vue
|-- welcome.vue
|-- about.vue
|-- index.vue
会生成
routes: [
{
path: '/posts',
component: '~pages/posts/index.vue'
}, {
path: '/posts/welcome',
component: '~pages/posts/welcome.vue'
}, {
path: '/about',
component: '~pages/about.vue'
}, {
path: '/',
component: '~pages/index.vue'
}
]
例2:隐藏路由
在文件名前加 _
|-- pages |-- _about.vue |-- index.vue
会生成
routes: [
{
path: '/',
component: '~pages/index.vue'
}
]
配置文件
目录下的 nuxt.config.js 是我们唯一的配置入口，这里不建议修改 .nuxt 目录，除非特殊需求
默认的给力我们三个配置 ·head·css·loading· 分别是头部设置，全局css，loading进度条
nuxt.config.js 的全部的配置如下,点击查看具体例子
- cache
- loading