nuxt.js实战

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')
})