响应标头信息

Content-Type 声明内容类型 ‘text/html’ charset=‘utf-8’ 设置编码

模板使用外部数据

renderToString(app,{
title:‘数据’,
mate:<meta name="description" content="">
})
普通数据使用双括号 {{ title }}
html文件使用三括号 {{{ mate }}}

Webpack配置

路径别名

    reslove:{alias:{//路径 @ 指向src'@':reslove(''../src/')},//省略扩展名//按照从前往后的顺序以次解析extensions:['.js','.vue','.json']}

合并webpack配置信息

    const { merge } = require('webpack-merge')const baseConfig = require('./webpack.base.config.js')  //另外的webpack配置文件module.exports = merge(baseConfig，{···配置信息})

构建配置命令

webpack.json文件中scripts中配置文件
cross-env 包设置环境
多任务队列执行中间 && 例子: npm run build && npm run serve

同构渲染流程

服务端渲染
- 客户端请求 => 服务端路由匹配 => 通过renderer.renderToString方法将 Vue实例渲染为html =>通过createBundleRenderer产生 => 加载打包好的服务端Bundle.json文件 => entry 入口文件 => 入口文件中创建的 Vue实例进行渲染 => 加载进html，发送客户端
客户端渲染
- 通过createBundleRenderer加载打包好的客户端js文件 => 客户端激活
- 客户端激活
  - Vue接管服务端发送的html,变由Vue动态管理的DOM
  - data-server-rendered属性时代表HTML由服务端渲染，以激活模式加载
  - 开发模式下 Vue推断客户端的虚拟DOM与服务端渲染DOM是否一致，否则退出混合模式重新从头渲染，生产模式下跳过次检测，影像性能
```
    客户端打包好的json文件publicPath:'' 文件地址all:[] 客户端打包的资源文件，js文件以及map文件initial:[] 客户端打包好的js文件、服务端渲染时自动引入 initial中的文件async:[] 存储异步资源modules:{'hash值':[引用的all中文件index]} 原始文件中每个模块加载的索引文件，hash是模块
```

HMR实现

第三方 chokidar模块监视文件 chokidar封装了 fs.watch和fs.watchFile文件
require是有缓存的
webpack-hot-middleware实现热更新

编写通用应用注意事项

服务端渲染只有 beforeCreate和created两个生命周期函数
避免在beforeCreate和created生命周期函数中使用定时器等代有副作用的代码，写了应该在brofreDestory和destoryed中销毁，服务端没有此生命周期函数，应将副作用代买写到beforeMount和mounted中

配置vueRouter

vueRouter使用history模式，前后端都兼容，hash模式服务端渲染不兼容

数据预取

服务端渲染不支持响应式修改数据，可以通过vuex
服务端数据需要与客户端连接同，通过context.state

静态站点生成

Gridsome

基于Vue.js的静态网站生成器

静态网站生成器 JAMStack

使用一系列配置、模板以及数据，生成静态HTML文件以及相关资源的工具
这个功能叫做预渲染
生成网站不需要服务器
只需要放到支持静态资源的Web Server或者CDN上即可

静态网站优点

不需要专业服务器，只需有托管静态文件爱你的空间即可
不需要后台服务器的处理，只传输内容
没有后端程序的执行更加安全

常见静态网站生成器

Jeky ( Ruby)
Hexo ( Node)
Hugo ( Golang)
Gatsby ( Node/React)
Gridsome ( Node/Vue)
Next.js以及Nuxt.js也能生成静态网站，更多的使用服务端渲染

JAMStack

JAMSack的JAM是JavaScript、API和Markup的首字母组合
本质是一种胖前端，通过调用各种API来实现更多的功能
也是一种前后端模式，只不过离得比较开，甚至前后端来自多个厂商

使用场景

不适合大量路由页面的应用
- 大量的数据会导致预渲染缓慢
不适合有大量动态内容的应用

Gridsome 配置文件

siteName 网站标题名称
siteDescription 设置mate属性中的seo搜索值

添加集合

通过后台查询的数据通过plugins将数据添加到GraphQL层，然后点击运行后的第三个网站进入GraphQL数据层，点击DOCS通过POST查询单个文章通过allpost查询所有文章

页面中查询GraphQL

多个查询在同一个query中写多个查询
在Pages以及Templates中使用查询，在Components中使用查询，与tempalte平级
同过 $page.名称.名称中
在页面中写好查询语句复制到组件中
打包时数据会直接打包进对应的静态文件中
详情见文档

渲染节点页面

GraphQL中变量以$开头

    id变量类型为ID,!表示不能为空query($id:ID!){}

Strapi

封装Vue组件库

CDD

自上而下
从组件级别开始，到页面级别结束

优点

组件在最大程度上被重用
并行开发，不同团队之间同时开发
可视化测试

处理组件边界情况

root通过root 通过root通过root获取vue根实例所存储的共享数据，小型项目中可以使用$root访问根实例，中大型项目推荐vuex
parent可以通过parent 可以通过parent可以通过parent改变/获取父组件中的成员，可以替代property，property或取得数据不是响应式,应用复杂不容易维护，多层级维护嵌套深
children是个数组，获取子组件成员，需要索引获取，可读性不高，如果需要获取所有子组件中的成员推荐，单个推荐children 是个数组，获取子组件成员，需要索引获取，可读性不高，如果需要获取所有子组件中的成员推荐，单个推荐children是个数组，获取子组件成员，需要索引获取，可读性不高，如果需要获取所有子组件中的成员推荐，单个推荐ref
ref如果是普通的html标签ref 如果是普通的html标签ref如果是普通的html标签refs获取到的是DOM对象，如果是ref是在子组件上$refs获取到的是子组件对象

    //子组件    myinput<template><input v-model="value" type="text" ref="txt"></template><script>this.$refs.txt   //获取到的是DOM对象</script>//父组件<template><myinput ref="mytxt"></myinput></template><script>this.$refs.mytxt  //获取到的是子组件对象</script>

依赖注入 provide&inject
- inject注入的值不允许改变，非响应式
- 依赖父组件，组件耦合高，重构困难

    //父组件<script>export default {provide(){    //注入数据return{title:this.title,   //元素handle:this.handle  //方法}},data(){return{title:'123456'}},methods:{handle(){log(123123)}}}</script>//子组件 && 子孙组件<script>export default{//提取数据inject:['title','handle']   }</script>

$attrs & $listeners

$attrs
- 把父组件中非prop属性绑定到内部组件
- 不会改变class和style,会和bong到最外层标签的class和style
- 不想继承父组件除了props外的属性通过inheritAttrs禁用
- 通过 v-bind="$attrs"把非prop属性设置在希望给的标签上
```
    <template><div>   aaa在div上<input v-bind="$attrs">   </div></template><script>export default{props:['aaa']inheritAttrs:false //禁用除了props外的属性}</script>
```

$listeners

把父组件中的DOM对象的原生事件绑定到内部组件

    //父组件   myinput<template><div><myinput@focus="onFouns"@input="onIput"></myinput></div><template><script>export default{methods{onFouns(e){log(e)},,onIput(e){log(e)}}}</script>//子组件<template><div><input v-on="$listeners"></div><template><script></script>

父组件给子组件传递属性
- 直接传递没有props接受会直接赋给子组件的根标签
- props有了之后要进行绑定，props不能绑定 style和class

快速原型开发

Vue/cli提供了插件
npm install -g @vue/cli-service-global //全局安装
vue serve直接运行vue单文件
- vue serve 不设置参数默认寻找目录中的 main.js index.js App.vue app.vue
- 也可以加载指定文件 vue serve ./src/login.vue

组件开发

Monorepo

Multirpo(Multiple Repository)
- 每一个包对应一个项目
Monorepo(Monolithic Repository)
- 一个项目仓库中管理多个模块/包
项目结构
- Monorepo类型项目目录结构
- 大多数开源项目采用
- packags中每个组件都是一个包
- 整个项目再是一个大包

    项目packages组件_test_  //组件测试文件夹dist //组建打包文件夹src     //组件源码.vueindex.js   //组件入口文件LICENSE //开源协议package.json //  组件包依赖等README.md   // 组件文档

Storybook

可视化的组件展示平台
在隔离的开发环境中，以交互式的方式展示组件
独立开发组件
支持的框架
- React、React Native、Vue、Angular
- Ember、HTML、Svelte、Mithril、Riot

安装

自动安装
- npx -p @storybook/cli sb init --type vue //指定 vue框架
- yarn add vue
- vue yarn add vue-loader vue-template-compiler --dev

yarn workspces 工作区

多个packages中的组件依赖使用工作区后相同的依赖只会安装一次
yarn有工作区npm没有

    开启工作区在项目根目录的package.json"private":true,   //必须设置，防止意外暴露内容"workspaces":["./packages/*"]

安装依赖
- 多个组件中相同的依赖会安装到项目根目录的node_modules中，不会单独安装到组件中
- 仅单个组件使用的依赖会安装到包的依赖中，不同版本的也是
- 根目录中直接安装依赖 yarn workspace 包名(package.json中的name) add 依赖名称

lerna

Lerna是一个优化使用git和npm管理多包仓库的工作流工具
用于管理具有多个吧哦的JavaScript项目
他可以一键把代码提交到git和npm仓库

使用

.gitignore 中忽略 node_modules
git add . 修改文件添加暂缓区
git commit -m ‘’ 信息
npm config get registry 查看npm源
安装
- yarn global add lerna
初始化
- lerna init
发布
- lerna publish

单元测试

优点

提供描述组件行为的文档
节省手动测试的时间
减少研发新特性时产生的bug
改进设计
促进重构

依赖

Vue Test Utils
Jest
vue-jest
babel-jest

Vue.js SSR学习相关推荐

laravel+vue.js的学习以及为什么浏览器中要有井号“#”
一.前言一直想找机会学一下vue,但是go还没来得及学,laravel的源码还没看完,学习vue更是遥遥无期.幸好新公司的项目是用laravel+vue编写的,这才有幸接触到vue. 但是我在观看项 ...
三十、开始前端Vue.js的学习之路
@Author:Runsen @Date:2019/08/07 @modified Date:2019/08/07 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼 ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
Vue.js（学习Vue3之前必须要掌握的知识）
文章目录第一个Vue程序 el挂载点 data数据对象 v-text v-html v-on 计数器 v-show v-if v-bind 图片切换 v-for v-on自定义参数 v-model双 ...
vue.js 的学习
⭐️ ? ✨ ⚡️ 技术栈 # vue官网http://vuejs.org/ # Vuex中文手册 http://vuex.vuejs.org # Vue-Router 手册 http://route ...
我的Vue.js的学习之旅记录(1)
学习途径:vue官网, 慕课网一. 所需知识储备:js,es6,webpack,npm 1.nuxt框架围绕vue推出 2.weex可以用vue写app Vue.js 是什么 Vue (读音 /vj ...
vue.js 基础学习 11天 -- 转载某培训机构学习资料（转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
Vue.js教程学习笔记
官方视频简易教程:https://learning.dcloud.io/ 1. 安装与部署第一阶段(初学)可以通过在html文件中引入脚本来完成安装 <script src="vue ...
vue.js组件学习（上）
组件是vue.js中非常重要的一部分,打个比方,会用组件得人喝着茶就写完的页面,不会用的代码打到手抽筋也未必完的成. 首先何为组件组件可以封装重用的代码,扩展HTML元素,更高的说组件是自定义元素. ...

Vue.js SSR学习

响应标头信息

模板使用外部数据

Webpack配置

构建配置命令

同构渲染流程

HMR实现

编写通用应用注意事项

配置vueRouter

数据预取

静态站点生成

Gridsome

静态网站生成器 JAMStack

静态网站优点

常见静态网站生成器

JAMStack

使用场景

Gridsome 配置文件

添加集合

页面中查询GraphQL

渲染节点页面

Strapi

封装Vue组件库

CDD

优点

处理组件边界情况

$attrs & $listeners

快速原型开发

组件开发

分类

Monorepo

Storybook

安装

yarn workspces 工作区

lerna

使用

单元测试

优点

依赖

Vue.js SSR学习相关推荐

最新文章

热门文章