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代码在服务端执行一次在客户端再执行一次:
- 服务端执行完成渲染解决了首次加载速度慢的问题
- 浏览器执行解决了绑定事件及恢复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。