开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情
nuxt srr服务端渲染
nuxt.js,内置vuex vue-router ssr框架
新建目录cnpm install nuxr --save
"script": {
"dev": "nuxt"
}
//新建pages目录,为页面
mkdir pages
npm run dev
nuxt约束
文件夹约束
1.assets静态资源
2.components组件
3.layouts布局
4.middleware中间件
5.store vuex
6.nuxt .config.js 个性化配置
SPA单页应用的缺点
1.首屏渲染性能:必须得等到js加载完毕,执行完毕之后,才能渲染出首屏
2.seo 爬虫只能拿到一个div,会认为页面是空的,不利于seo
SSR
后端渲染出完整的首屏的dom结构返回,前端拿到的内容带上首屏,后续的页面操作,再用单页的路由跳转和渲染,称之为服务端渲染
单页应用的页面路由,都是前端控制,后端只负责提供数据
新建router.js对外暴露createRouter
后端加入webpack
npm install cross-env vue-server-renderer webpack-node-externals lodash.merge --save
数据响应vuex npm install --save -vuex
ssr之前要先跑npm run build
vue项目实战步骤
1.UI库选型
2.登录模块开发
3.登录模块模拟接口
4.保存vuex的状态
5.axios全局配置与请求拦截
6.深入理解令牌机制bearer token
7.真实实现接口Kao
8.请求代理
Vue Router vuejs官方的路由管理器
vue create vue-router-vuex
npm install vue-router -S or vue add router
npm run serve
1.嵌套的路由/视图表
2.模块化的,基于组件的路由配置
3.路由的参数
4.基于Vuejs过渡系统的视图过渡效果
5细粒度的导航控制
6.带有自动激活的 css class的链接
7.历史模式与hash模式
app里使用router-view占位符
使用router-link作为导航按钮
history模式
默认是hash模式,url使用#后面定位路由,对seo不利,设置为history,就可以使用普通的url模式
嵌套路由: 子路由 比如页面内部的导航复用
命名视图 router-view name="nav"
