Vue SSR 项目 Nuxt.js 框架之《设置mate与定义化html模板》
在做一些SEO的时候，一般会设置meta信息，或者做移动端项目的时候会设置一下视口等。我们一起看下在 nuxt 中如何设置 meta 和 head 内容的，以及如何定义化 html 模板。
重启后查看源码就可以看到我们设置的 head 信息了~~
页面个性化设置的时候，需要在页面里写入 head 函数并返回一个对象，如下：
这样就完成了每个页面的个性化的 meta 等一些 head 信息
每个页面的个性化设置 head 信息可以每个页面都写一个 head 函数去设置，但显得臃肿也不利于维护。我们可以在 plugins 的 mixins 文件里混入一个全局方法，每个页面去调用，以此来实现个性化的 meta 信息设置。
混入后，每个页面使用如下：
处理以上提到的设置 head 信息的方式，还可以通过定义化 html 模板来实现，但需要遵循nuxt的一些规则，比如：名称必须为 app.html ，而且必须用 双花括号 获得已设置的信息等，如下：
vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（使用篇）
旨在让开发者在开发时拥有
的一条龙服务。(接下来，我们携手...)
假设 项目经理提了个 需求 ：要开发一个组件，名叫 chaste-component。
准备工作
准备工作完毕
打包
默认使用package.json的name打包
构建出了预发布文件
只需关注src文件内的组件开发，开发完成就可以
发布组件了（有特殊需求配置的除外）
运行
监听src文件变动，热更新
新开一个终端
运行在8080端口， 打开
Home 页面
上手 页面
页面基础内容也是自动生成的，只需要对docs-src/views文件的组件示例做调整
支持eslint风格检查及自动格式化，在 ctrl+s 保存的时候自动格式化，没用过格式化的都说直接 飞起来了
eslint风格检查
需要插件 eslint、babel-eslint、eslint-plugin-vue 及配置文件 .eslintrc.js 的支持，这些都已经做好了
自动格式化
需要编辑器设置的支持，这里在 .vscode/settings.json 文件配置好了
2019年11月github正式开放了github-actions，感动！
这里我们只介绍怎么用她完成demo自动构建，想要更多了解的可以看看阮一峰老师的这篇文章 GitHub Actions 入门教程
添加密钥并提交项目
然后提交项目到chaste-component仓库
github pages
设置source为gh-pages分支
打开 ，就进入了demo页面
之后 chaste-component 项目的每次提交都回自动更新demo
已配置的 workflows/ci.yml 如下
下一篇博客将分享 vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（搭建篇）
github地址 （觉得有帮助，欢迎star）
从零开始Gin Web+Vue商城的搭建（一）-- 前后端框架搭建和简单沟通
同步更新的github地址：
看了一位老哥写的《 前后分离Vue+Gin(go)总结 》以后有种自己搭一份的想法，结合最近找工作比较闲，就准备自己写一份商城源码。
一、先来实现前端部分第一步搭建Vue框架。Vue我也是第一次接触，看了半天多的文档才有了大概的了解。先不过多考虑前端的实现，首先考虑一下前后台沟通的问题。
用vue-cli搭建一个新框架，在Helloworld.vue 或者新建一个模板页。
老哥的文档中写到，他推荐使用axios插件代替jquery来和后台做交互。那么我也按照他的思路安装一个axios插件，写一个跟后台通讯的Get请求。
二、然后来搭建后台框架，老哥说的是用Gin框架来搭建，并且用cors中间件来解决跨域访问问题，咱们也先来搭建一个简单的框架。
main.go
router.go
FPList.go
在浏览器里输入localhost:8081/FPList，可以看到刚才自己定义的Json串，知道后台算是成功了。
此时再打开前端页面，可以看到后台返回的结果已经显示在页面了。
号称目前最火的前端框架Vue，它有什么显著特点呢？
1、Vue是什么
Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App。
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js 是一套用于构建用户界面的渐进式框架。
2、Vue的特点
遵循 MVVM 模式
编码简洁，体积小，运行效率高，适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
3、Vue与其他前端框架的关系
借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术
4、Vue的现有插件
vue-cli: vue 脚手架，用于搭建项目的骨架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)
5、学习Vue的思想改变
Vue的中心思想是数据驱动，像远古时代的老前辈jQuery是结构驱动。
大家回忆下以前我们使用jQuery写代码的时候，经常是这样写的：
$("#myDiv").html("HelloWorld");
这些写法首先要获取Dom节点，也就是Dom结构，然后再修改数据更新结构的内容，使用jQuery的一个很大的目的就是为了去简化Dom的操作，而使用Vue就大不一样了，Vue的做法就是直接this.msg=HelloWorld，然后msg就会自动的同步到结构上，我们所要关心的是数据内容的改变，而不再去关心如何操作Dom结构了。
总结一句话：不要在想着怎么操作DOM，而是想着如何操作数据!!
Vue基础篇
内容简介：
1）Vue指令
2）computed和watch
3）生命周期钩子
4）组件间的传参
5）插槽
6）修饰符
7）nextTick()
前端三大框架：
Vue：尤雨溪开发
React：Facebook主导开发
Angular：谷歌主导开发
为什么选择Vue?
1.国内Vue的市场份额占比多
2.简单易上手，非常适合前端开发初学者学习
前置知识：
1.HTML、CSS和JS基础
2.了解Node和npm
3.webpack（可选，vue-cli已经封装了打包功能）
使用Vue的两种方式：
1.直接script标签引入vue.js文件
2.基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）
前端框架与库的区别
• jquery 库 - DOM(操作DOM) + 动画+ ajax请求
• 框架 - 全方位功能
一、指令
指令（Directives）是带有 v- 前缀的特殊属性。
插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。
v-model也可用在自定义组件上。
5.v-for（列表渲染）
使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1. 利用索引直接设置数组的某一项 2. 对象属性的添加或删除
二、computed和watch
三、生命周期钩子
什么是Vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。
1）beforeCreate
此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。
2）created
此时可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。
在这个钩子函数中，我们可以进行http请求，把请求到的数据储存在data中。
3）模板编译，把data里面的数据和vue语法写的模板编译成HTML
4）beforeMount
将编译完成的HTML挂载到对应虚拟DOM，此时还未挂载到页面上
5）mounted
编译好的HTML已挂载到页面上
6）beforeUpdate和updated
数据更新时调用，通常使用计算属性或侦听器取而代之
7）beforeDestroy
销毁所有观察者、组件及事件监听
8）destroyed
组件已经完全销毁，组件中的数据、方法、计算属性、过滤器等都已不可用。
四、组件间的通信
1.父子组件间的通信
父子组件通信可以总结为props向下传递，事件向上传递。
单向数据流：父级 prop 的更新会向下流动到子组件中，但反过来不行。
每个Vue实例都实现了事件接口：子组件使用 this.$emit(eventName,optionalPayload) 触发自定义事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。
父组件通过ref直接调用子组件中的方法。
子组件调用父组件中的方法：
1）子组件中通过 this.$parent.fatherMethod() 来调用父组件的方法
2）子组件用$emit向父组件触发一个事件，父组件监听这个事件
3）父组件通过props把方法传入子组件中（type: Function），在子组件里直接调用这个方法
2.兄弟组件间的通信
其中一种方法是让父组件充当两个子组件之间的中间件（中继）；
另一种就是使用EventBus（事件总线），它允许两个组件之间直接通信，而不需要涉及父组件：
Vue原型上的方法：
五、插槽
3）作用域插槽
使用场景：
在使用ElementUI组件库的el-table组件时，表格的编辑和删除操作要用到作用域插槽。因为el-table组件，就是当前组件的子组件。通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑、删除的操作。v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法（slot-scope）现在还保留，但3.0之后会移除。
六、修饰符
2.事件修饰符
vue提倡的是在方法中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，所以提供了事件修饰符用于DOM的事件处理。
3.按键修饰符
七、nextTick()
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（当数据更新了，在dom中渲染后，自动执行nextTick的回调）
应用场景：需要在视图更新之后，基于新的视图进行操作。