nuxt.js实战

原创已于 2024-04-18 17:09:49 修改 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2024-04-17 16:44:45 首次发布

本文介绍了Nuxt.js，一个基于Vue.js的通用应用框架，着重讲解了其在服务端渲染（SSR）、项目结构、路由管理、SSR实现方法以及配置过程。通过实例展示了如何使用Nuxt创建、部署和优化服务器端渲染应用。

nuxt.js

一个基于vue.js的通用应用框架,主要关注应用的UI渲染

/**
* 不仅仅用于服务端渲染,也可用于spa应用开发
* nuxt提供基础的项目结构,路由生成,中间件,插件等可大幅度提高开发效率
* nuxt可用于网站静态化
*/

nuxt 安装

npx create-nuxt-app <项目名>
在这里插入图片描述

目录结构

assets: 资源目录
components: 组件目录
layouts: 布局目录
middleware: 中间件目录
pages: 页面目录
plugins: 插件目录
static: 静态文件目录
store: 仓库
nuxt.config.js: 个性化配置nuxt应用

路由

基础路由
只需要在page下新建vue文件,即可生成路由
导航

 <nav>
   <nuxt-link to="/">首页</nuxt-link>
    <NLink to="/">首页</NLink>
    <n-link to="/">首页</n-link>
  </nav>

动态路由
pages/details/_id.vue
嵌套路由
pages/details.vue 文件名和目录名相同

SSR

1.1传统开发
传统开发,网页在服务端渲染完成,一次性传输到浏览器
1.2 单页面开发
单页面开发优秀的用户体验,页面内容由js渲染,这种方式称为客户端渲染
1.3 ssr服务端渲染
静态资源和数据都在本地的服务器侧,用户请求发送相关页面

建立Server服务

npm i vue-sever-render express -D

配置路由服务

应用为维度 ⇒ 请求为维度, 请求到的是不同的配置


// main.js ---> app.js
export default function createApp(){
	const router = createRouter()
	const app = new Vue({
		router,
		render: h => h(App)
	})
}
// entry-client.js 客户端入口
import createApp from './app'
const {app,router} = createApp()
router.onReady(()=>{
	app.$mount('#app')
})
//  entry-service.js 服务端入口
import  createApp from './app'
export default context = >{
	return new Promise((resolve,reject)=>{
		const {app,router} = createApp()
		router.push(context.url)
		router.onReady(()=>{
			resolve(app)
		},reject)
	})
}

创建服务

const express = require('express')
const Vue = require('Vue')
const app = express()
const renderer = require('vue-server-render').createRenderer()
const page = new Vue({
	template:"<div>hello ssr</div>"
})
app.use(express.static('../dist/client'))
app.get('*',async(req,res)=>{
	try{
		const html = await renderer.renderToString(page)
		res.send(html)
	}catch(e){
		res.status(500).send('SEVER INNER ERROR')
	}
})
app.listen(3000,()=>{
	console.log('start server')
})