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