1. 介绍
1.1 CSR和SSR
- CSR 客户端渲染
- SSR 服务端渲染
1.2 了解vue的服务端渲染
// 安装 npm i express --save
const Vue = require('vue)
const server=require(express)();
// express响应
server.get('/',(req, res) => {
(1) 创建vue实例
const app = new Vue({
template: `<div>hello</div>`
})
(2) 创建一个renderer
cons renderer = require('vue-server-renderer').createRenderer();
(3) renderer.renderToString(vue实例, (错误,渲染后端html)=>{})
renderer.renderToString(app, (err,html)=>{
if(err) throw err;
console.log(html);
})
//// 在2.5.0+ 如果没有传入回调函数,则会返回promise
renderer.renderToString(app).then(html=>{
console.log(html)
}).catch(err => {
console.log(err)
})
})
server.listen(3001)
1.3 默认模板和默认布局
- 默认模板: 在项目的根目录之下建立app.html
- 默认布局: 在layouts文件夹下 default.vue文件中添加内容
2.nuxt核心
2.1 安装
- npm install -g create-nuxt-app
- npx create-nuxt-app 项目名 (不能有大写)
2.2 生命周期
* 服务端的钩子:
(1) nuxtServerInit(store, context) 服务器初始化,一般只会运行一次, store文件夹下index.JS文件中.
(2) middleware 中间件运行, 配置方案有三种:
nuxt.config.js中,router{ middleware: 'ttt'}
layout文件夹下default.vue中, {middleware: 'auth'}或者{middleware() {}}
page页面组件中{middleware: 'auth'} 或者{middleware() {}}
(3) validate() 校验参数 配置在page页面中
(4)asyncData() fetch() 异步数据的处理
* 服务端和客户端都有的钩子:
beforeCreated()
created()
* 客户端钩子:
vue组件的钩子
2.3 路由
(1)
* 约定式路由, nuxt-link组件跳转
<nuxt-link :to="/good/2?a=11&b=22">
<nuxt-link :to="{name: 'news', params: {sid: 999, name: 'tom', age: 19}}">新闻页面</nuxt-link>
* 动态路由
<nuxt-link :to="{name: 'good-id', params:{id:3}, query:{name: 'tom'}}">
* 展示区层级: 将.vue文件放在同名文件夹中就会在上级展示区 展示.
* 扩展路由: 在nuxt.config.js中 router字段下 添加extendRoutes(routes,resolve)函数
(2)
* 参数校验
* 错误路由定制
* 统一动效 和 独享动效
(3) 路由导航守卫
前置: (依赖中间件middleware)
全局守卫: nuxt.config的router字段指向middleware
组件独享守卫: middleware字段可以指向中间件里的文件, 也可以自己实现middleware函数
插件全局守卫: 在plugins文件夹中定义一个router文件, app.router.beforeEach
后置:
插件全局后置守卫: 在plugins文件夹中定义一个router文件, app.router.afterEach
组件独享守卫: 在组件页面,beforeRouteLeave(to,from,next) {}
2.4 网络请求,数据交互
- 安装 @nuxtjs/axios @nuxtjs/proxy
- asyncDate() , fetch()
- 跨域
- 网络请求拦截器配置与token携带
2.5 vuex的使用 (store状态管理)
-
vuex定义与使用
-
状态持久化与token
安装 npm install cookie-universal-nuxt --save
登录时: 存vuex和cookie, 强制刷新之后, nuxtServerInit钩子,取出cookies, 同步vuex, axios拦截器读取vuex
3. 项目开发
3.1 引入UI组件库
- npm i element-ui -S
- 在nuxt.config里边 配置plugins 和 build.transpile
- nav 导航
3.2 登录 注册
- 登录
- 注册
- 注销
3.3 SSR渲染
- 组件数据
- Vuex数据
3.4 页面
- 表格
- 标签页
- menu
- 走马灯
- 商品卡片
3.5 全局
- 全局方法
- 全局过滤器
- 全局指令
- 全局组件
- 混入方法
- 全局样式:
- scss:
- 安装node-sass sass-loader,
- 全局scss, @nuxtjs/style-resources
3.6 资源指向
-
内部资源
- 可以通过相对路径的方式 ./ ,找到压缩的资源, 例如assets下的资源
- 可以通过绝对路径的方式 / ,找到无需压缩的资源, 例如static下的资源
- css指向需要压缩的资源
- 相对路径 ./ 可以用别名来代替 ~, 这个符号代表我们项目的跟目录
-
外部资源
- src引入
- head下 script字段添加.js
- head下 link字段添加字体
- head可以是nuxt.config 也可以是页面
