Nuxt.js服务器端渲染框架

1、创建Nuxt.js项目

1、确保已经安装好了node.js和vue-cli脚手架。
2、全局安装create-nuxt-app脚手架工具。

npm install create-nuxt-app@2.9.x -g

3、在项目存储目录下执行以下命令，创建项目。

npx create-nuxt-app my-nuxt-dome

（其余回车默认即可）
4、安装配置完成后，启动项目，命令如下。

cd my-nuxt-demo
npm run dev

---

接下来对my-nuxt-demo项目中的关键文件进行说明，详细描述如下表所示。

2、页面和路由

在项目中，pages目录用来存放应用的路由及视图，目前该目录下有两个文件，分别是index.vue和README.md，当直接访问根路径“/”的时候，默认打开的是index.vue文件。

Nuxt.js会根据目录结构自动生成对应的路由配置，将请求路径和pages目录下的文件名映射，例如，访问**“/test”就表示访问test.vue文件**，如果文件不存在，就会提示“This page could not be found”（该页面未找到）错误。

Nuxt.js提供了非常方便的自动路由机制，当它检测到pages目录下的文件发生变更时，就会自动更新路由。通过查看“.nuxt\router.js”路由文件，可以看到Nuxt.js自动生成的代码，如下所示。

（只要写vue文件，Nuxt.js会帮你自动生成路由文件，然后到浏览器可以直接访问）

3、页面跳转

Nuxt.js中使用<nuxt-link>组件来完成页面中路由的跳转，它类似于Vue中的路由组件<router-link>，它们具有相同的属性，并且使用方式也相同。需要注意的是，在Nuxt.js项目中不要直接使用<a>标签来进行页面的跳转，因为<a>标签是重新获取一个新的页面，而<nuxt-link>更符合SPA的开发模式。

1、声明式路由

---

2、编程式跳转