Nuxt.js框架使用

1.同构理念

一套vue（react）代码，在服务端执行一次，在客户端再执行一次，就做同构

const app = new Vue({
    data: {
      url: req.url
    },
    template: 
    `<div>
      访问的 URL 是：{{ url }}
      <button @click="alert('456')">click me!</button>
    </div>`
})

上面所示的vue代码，我们在服务端的执行保持不变，只要我们把这段代码在客户端再重新执行一遍，不就可以拥有原本vue应用的所有特性了么，确实如此，不过这个过程的难度太大，我们现在只需要理解，所谓的同构是指：同一套vue代码在服务端执行一次在客户端再执行一次:

1. 服务端执行完成渲染解决了首次加载速度慢的问题
2. 浏览器执行解决了绑定事件及恢复vue本身特性的问题

2. Nuxt.js框架使用

nuxt.js是一套使用vue框架开发应用的服务端渲染框架，提供了开箱即用的功能.

1.打开一个终端（如果您使用的是Visual Studio Code，您可以打开一个集成终端）并使用以下命令创建一个新的入门项目：

npx nuxi init <project-name>

在 Visual Studio Code 中打开项目文件夹：
code <project-name>

安装依赖项：

npm install

注意：如果使用pnpm，请确保之前有.npmrcwith shamefully-hoist=trueinside pnpm install。
开发服务器
现在您将能够在开发模式下启动您的 Nuxt 应用程序：

npm dev -o

浏览器窗口应自动打开http://localhost:3000。