更新：博客导航结构 & 新增：meta文章等
This commit is contained in:
xugaoyi
parent
c7b7b29a60
commit
86a953e088
|
|
@ -9,6 +9,7 @@ module.exports = {
|
|||
['link', { rel: 'icon', href: '/img/EB-logo.png' }], //favicons，资源放在public文件夹
|
||||
['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
|
||||
['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],
|
||||
['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色
|
||||
// ['script', { src: 'https://hm.baidu.com/hm.js?837775213e724293b4af2b9526e238b4'}]
|
||||
|
||||
// 以下是vuepress-plugin-demo-block插件所需依赖
|
||||
|
|
|
|||
|
|
@ -3,23 +3,24 @@ module.exports = [
|
|||
|
||||
{text: '前端',
|
||||
items: [
|
||||
{text: 'JavaScript', items:[
|
||||
{text: '前端文章', items: [
|
||||
{text: 'JavaScript', link: '/pages/d039d42572a97b66/'},
|
||||
{text: 'Vue', link: '/pages/bc8edd16a03876a0/'},
|
||||
]},
|
||||
{text: '学习笔记', items:[
|
||||
{text: '《JavaScript教程》笔记', link: '/pages/0796ba76b4b55368/'},
|
||||
{text: 'JavaScript相关文章', link: '/pages/d039d42572a97b66/'},
|
||||
]},
|
||||
{text: 'ES6', items:[
|
||||
{text: '《ES6 教程》笔记', link: '/pages/f344d070a1031ef7/'},
|
||||
]},
|
||||
{text: 'Vue', items:[
|
||||
{text: '《Vue》笔记', link: '/pages/114158caa9e96df0/'},
|
||||
]},
|
||||
{text: 'TypeScript',items:[
|
||||
{text: '《TypeScript 从零实现 axios》', link: '/pages/e05dce83e5129785/'},
|
||||
]},
|
||||
|
||||
]}
|
||||
]
|
||||
},
|
||||
{text: '页面',
|
||||
items: [
|
||||
{text: 'HTML', link: '/pages/8309a5b876fc95e3/'},
|
||||
{text: 'CSS', link: '/pages/0a83b083bdf257cb/'},
|
||||
]
|
||||
},
|
||||
{text: '页面', link: '/pages/0a83b083bdf257cb/'},
|
||||
{text: '技术',
|
||||
items: [
|
||||
{text: '技术文档', link: '/pages/9a7ee40fc232253e/'},
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
// 侧边栏自动生成
|
||||
module.exports = {
|
||||
|
||||
"/01.前端/": [{"title":"JavaScript","collapsable":false,"children":[["01.JavaScript/00.《JavaScript教程》笔记.md","《JavaScript教程》笔记"],["01.JavaScript/01.数据类型转换.md","数据类型转换"],["01.JavaScript/02.new命令原理.md","new命令原理"],["01.JavaScript/03.ES5面向对象.md","ES5面向对象"],["01.JavaScript/04.ES6面向对象.md","ES6面向对象"],["01.JavaScript/05.JavaScript中的名词概念.md","JavaScript中的名词概念"],["01.JavaScript/06.多种数组去重性能对比.md","多种数组去重性能对比"]]},{"title":"ES6","collapsable":false,"children":[["02.ES6/00.《ES6 教程》笔记.md","《ES6 教程》笔记"]]},{"title":"JS代码段","collapsable":false,"children":[["03.JS代码段/01.js随机打乱数组.md","js随机打乱数组"],["03.JS代码段/02.判断是否为移动端浏览器.md","判断是否为移动端浏览器"]]},{"title":"Vue","collapsable":false,"children":[["04.Vue/00.《Vue》笔记.md","《Vue》笔记"]]},{"title":"TypeScript","collapsable":false,"children":[["05.TypeScript/01.《TypeScript 从零实现 axios》.md","《TypeScript 从零实现 axios》"]]}],
|
||||
"/01.前端/": [{"title":"学习笔记","collapsable":false,"children":[["10.学习笔记/00.《JavaScript教程》笔记.md","《JavaScript教程》笔记"],["10.学习笔记/10.《ES6 教程》笔记.md","《ES6 教程》笔记"],["10.学习笔记/20.《Vue》笔记.md","《Vue》笔记"],["10.学习笔记/30.《TypeScript 从零实现 axios》.md","《TypeScript 从零实现 axios》"]]},{"title":"JavaScript文章","collapsable":false,"children":[["25.JavaScript文章/01.数据类型转换.md","数据类型转换"],["25.JavaScript文章/02.new命令原理.md","new命令原理"],["25.JavaScript文章/03.ES5面向对象.md","ES5面向对象"],["25.JavaScript文章/04.ES6面向对象.md","ES6面向对象"],["25.JavaScript文章/05.JavaScript中的名词概念.md","JavaScript中的名词概念"],["25.JavaScript文章/06.多种数组去重性能对比.md","多种数组去重性能对比"],["25.JavaScript文章/50.js随机打乱数组.md","js随机打乱数组"],["25.JavaScript文章/60.判断是否为移动端浏览器.md","判断是否为移动端浏览器"]]},{"title":"Vue文章","collapsable":false,"children":[["30.Vue文章/10.初始化vue项目要做的一些工作.md","初始化vue项目要做的一些工作"]]}],
|
||||
|
||||
"/02.页面/": [{"title":"html-css","collapsable":false,"children":[["01.html-css/01.flex布局语法.md","flex布局语法"],["01.html-css/02.flex布局案例-基础.md","flex布局案例-基础"],["01.html-css/03.flex布局案例-骰子.md","flex布局案例-骰子"],["01.html-css/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局"],["01.html-css/05.flex布局案例-网格布局.md","flex布局案例-网格布局"],["01.html-css/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局"],["01.html-css/07.CSS3之transform过渡.md","CSS3之transform过渡"],["01.html-css/08.CSS3之animation动画.md","CSS3之animation动画"]]}],
|
||||
"/02.页面/": [{"title":"HTML","collapsable":false,"children":[["10.HTML/10.常用meta整理.md","常用meta整理"]]},{"title":"CSS","collapsable":false,"children":[["20.CSS/01.flex布局语法.md","flex布局语法"],["20.CSS/02.flex布局案例-基础.md","flex布局案例-基础"],["20.CSS/03.flex布局案例-骰子.md","flex布局案例-骰子"],["20.CSS/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局"],["20.CSS/05.flex布局案例-网格布局.md","flex布局案例-网格布局"],["20.CSS/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局"],["20.CSS/07.CSS3之transform过渡.md","CSS3之transform过渡"],["20.CSS/08.CSS3之animation动画.md","CSS3之animation动画"]]}],
|
||||
|
||||
"/03.技术/": [{"title":"技术文档","collapsable":false,"children":[["01.技术文档/01.Git使用手册.md","Git使用手册"],["01.技术文档/02.Markdown使用教程.md","Markdown使用教程"],["01.技术文档/03.npm常用命令.md","npm常用命令"],["01.技术文档/04.yaml语言教程.md","yaml语言教程"]]},{"title":"GitHub","collapsable":false,"children":[["02.GitHub/01.GitHub高级搜索技巧.md","GitHub高级搜索技巧"],["02.GitHub/02.GitHub Actions 实现自动部署静态博客.md","GitHub Actions 实现自动部署静态博客"],["02.GitHub/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md","GitHub Actions 定时运行代码：每天定时百度链接推送"]]},{"title":"Nodejs","collapsable":false,"children":[["03.Nodejs/01.nodejs递归读取所有文件.md","nodejs递归读取所有文件"]]},{"title":"博客搭建","collapsable":false,"children":[["04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md","解决百度无法收录搭建在GitHub上的个人博客的问题"],["04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md","使用Gitalk实现静态博客无后台评论系统"],["04.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md","GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床"]]}],
|
||||
|
||||
|
|
@ -20,6 +20,6 @@ module.exports = {
|
|||
|
||||
"/《TypeScript 从零实现 axios》/": [{"title":"《TypeScript 从零实现 axios》","collapsable":false,"children":[]},{"title":"初识 TypeScript","collapsable":false,"children":[["01.初识 TypeScript/01.简介.md","简介"],["01.初识 TypeScript/02.安装 TypeScript.md","安装 TypeScript"],["01.初识 TypeScript/03.编写第一个 TypeScript 程序.md","编写第一个 TypeScript 程序"]]},{"title":"TypeScript 常用语法","collapsable":false,"children":[["02.TypeScript 常用语法/01.基础类型.md","基础类型"],["02.TypeScript 常用语法/02.变量声明.md","变量声明"],["02.TypeScript 常用语法/03.接口.md","接口"],["02.TypeScript 常用语法/04.类.md","类"],["02.TypeScript 常用语法/05.函数.md","函数"],["02.TypeScript 常用语法/06.泛型.md","泛型"],["02.TypeScript 常用语法/07.类型推断.md","类型推断"],["02.TypeScript 常用语法/08.高级类型.md","高级类型"]]},{"title":"ts-axios 项目初始化","collapsable":false,"children":[["03.ts-axios 项目初始化/01.需求分析.md","需求分析"],["03.ts-axios 项目初始化/02.初始化项目.md","初始化项目"],["03.ts-axios 项目初始化/03.编写基础请求代码.md","编写基础请求代码"]]},{"title":"ts-axios 基础功能实现","collapsable":false,"children":[["04.ts-axios 基础功能实现/01.处理请求 url 参数.md","处理请求 url 参数"],["04.ts-axios 基础功能实现/02.处理请求 body 数据.md","处理请求 body 数据"],["04.ts-axios 基础功能实现/03.处理请求 header.md","处理请求 header"],["04.ts-axios 基础功能实现/04.获取响应数据.md","获取响应数据"],["04.ts-axios 基础功能实现/05.处理响应 header.md","处理响应 header"],["04.ts-axios 基础功能实现/06.处理响应 data.md","处理响应 data"]]},{"title":"ts-axios 异常情况处理","collapsable":false,"children":[["05.ts-axios 异常情况处理/01.错误处理.md","错误处理"],["05.ts-axios 异常情况处理/02.错误信息增强.md","错误信息增强"]]},{"title":"ts-axios 接口扩展","collapsable":false,"children":[["06.ts-axios 接口扩展/01.扩展接口.md","扩展接口"],["06.ts-axios 接口扩展/02.axios 函数重载.md","axios 函数重载"],["06.ts-axios 接口扩展/03.响应数据支持泛型.md","响应数据支持泛型"]]},{"title":"ts-axios 拦截器实现","collapsable":false,"children":[["07.ts-axios 拦截器实现/01.拦截器设计与实现.md","拦截器设计与实现"]]},{"title":"ts-axios 配置化实现","collapsable":false,"children":[["08.ts-axios 配置化实现/01.合并配置的设计与实现.md","合并配置的设计与实现"],["08.ts-axios 配置化实现/02.请求和响应配置化.md","请求和响应配置化"],["08.ts-axios 配置化实现/03.扩展 create 静态接口.md","扩展 create 静态接口"]]},{"title":"ts-axios 取消功能实现","collapsable":false,"children":[["09.ts-axios 取消功能实现/01.取消功能的设计与实现.md","取消功能的设计与实现"]]},{"title":"ts-axios 更多功能实现","collapsable":false,"children":[["10.ts-axios 更多功能实现/01.withCredentials.md","withCredentials"],["10.ts-axios 更多功能实现/02.XSRF 防御.md","XSRF 防御"],["10.ts-axios 更多功能实现/03.上传和下载的进度监控.md","上传和下载的进度监控"],["10.ts-axios 更多功能实现/04.HTTP 授权.md","HTTP 授权"],["10.ts-axios 更多功能实现/05.自定义合法状态码.md","自定义合法状态码"],["10.ts-axios 更多功能实现/06.自定义参数序列化.md","自定义参数序列化"],["10.ts-axios 更多功能实现/07.baseURL.md","baseURL"],["10.ts-axios 更多功能实现/08.静态方法扩展.md","静态方法扩展"]]},{"title":"ts-axios 单元测试","collapsable":false,"children":[["11.ts-axios 单元测试/01.前言.md","前言"],["11.ts-axios 单元测试/02.Jest 安装和配置.md","Jest 安装和配置"],["11.ts-axios 单元测试/03.辅助模块单元测试.md","辅助模块单元测试"],["11.ts-axios 单元测试/04.请求模块单元测试.md","请求模块单元测试"],["11.ts-axios 单元测试/05.headers 模块单元测试.md","headers 模块单元测试"],["11.ts-axios 单元测试/06.Axios 实例模块单元测试.md","Axios 实例模块单元测试"],["11.ts-axios 单元测试/07.拦截器模块单元测试.md","拦截器模块单元测试"],["11.ts-axios 单元测试/08.mergeConfig 模块单元测试.md","mergeConfig 模块单元测试"],["11.ts-axios 单元测试/09.请求取消模块单元测试.md","请求取消模块单元测试"],["11.ts-axios 单元测试/10.剩余模块单元测试.md","剩余模块单元测试"]]},{"title":"ts-axios 部署与发布","collapsable":false,"children":[["12.ts-axios 部署与发布/01.ts-axios 编译与发布.md","ts-axios 编译与发布"],["12.ts-axios 部署与发布/02.引用 ts-axios 库.md","引用 ts-axios 库"]]}],
|
||||
|
||||
"/《Vue》笔记/": [{"title":"《Vue》笔记","collapsable":false,"children":[]},{"title":"基础","collapsable":false,"children":[["01.基础/00.MVVM模式.md","MVVM模式"],["01.基础/10.生命周期.md","生命周期"],["01.基础/20.计算属性 vs 方法 vs 侦听属性.md","计算属性 vs 方法 vs 侦听属性"],["01.基础/30.v-if vs v-show.md","v-if vs v-show"],["01.基础/35.列表渲染之数组、对象更新检测.md","列表渲染之数组、对象更新检测"]]},{"title":"组件","collapsable":false,"children":[["02.组件/36.使用组件的细节点.md","使用组件的细节点"],["02.组件/40.父组件给子组件传值.md","父组件给子组件传值"],["02.组件/50.子组件派发事件和值给父组件.md","子组件派发事件和值给父组件"],["02.组件/52.Prop 验证 与 非 Prop 的 Attribute.md","Prop 验证 与 非 Prop 的 Attribute"],["02.组件/55.自定义事件.md","自定义事件"],["02.组件/60.兄弟组件传值.md","兄弟组件传值"],["02.组件/65.非父子组件传值.md","非父子组件传值"],["02.组件/70.父组件调用子组件方法并传入值.md","父组件调用子组件方法并传入值"],["02.组件/75.插槽slot.md","插槽slot"],["02.组件/80.动态组件与 v-once 指令.md","动态组件与 v-once 指令"],["02.组件/90.vue父子组件的生命周期顺序.md","vue父子组件的生命周期顺序"]]},{"title":"过渡&动画","collapsable":false,"children":[["03.过渡&动画/110.transition过渡&动画.md","transition过渡&动画"],["03.过渡&动画/112.使用animate库.md","使用animate库"],["03.过渡&动画/120.transition-group列表过渡.md","transition-group列表过渡"]]},{"title":"可复用性&组合","collapsable":false,"children":[["04.可复用性&组合/01.Mixin混入.md","Mixin混入"]]},{"title":"规模化","collapsable":false,"children":[["06.规模化/100.vuex操作相关.md","vuex操作相关"],["06.规模化/140.路由懒加载.md","路由懒加载"]]},{"title":"其他","collapsable":false,"children":[["99.其他/80.节流函数封装（搜索框防多次请求）.md","节流函数封装（搜索框防多次请求）"],["99.其他/90.操作本地缓存.md","操作本地缓存"]]}],
|
||||
"/《Vue》笔记/": [{"title":"《Vue》笔记","collapsable":false,"children":[]},{"title":"基础","collapsable":false,"children":[["01.基础/00.MVVM模式.md","MVVM模式"],["01.基础/10.生命周期.md","生命周期"],["01.基础/20.计算属性 vs 方法 vs 侦听属性.md","计算属性 vs 方法 vs 侦听属性"],["01.基础/30.v-if vs v-show.md","v-if vs v-show"],["01.基础/35.列表渲染之数组、对象更新检测.md","列表渲染之数组、对象更新检测"]]},{"title":"组件","collapsable":false,"children":[["02.组件/36.使用组件的细节点.md","使用组件的细节点"],["02.组件/40.父组件给子组件传值.md","父组件给子组件传值"],["02.组件/50.子组件派发事件和值给父组件.md","子组件派发事件和值给父组件"],["02.组件/52.Prop 验证 与 非 Prop 的 Attribute.md","Prop 验证 与 非 Prop 的 Attribute"],["02.组件/55.自定义事件.md","自定义事件"],["02.组件/60.兄弟组件传值.md","兄弟组件传值"],["02.组件/65.非父子组件传值.md","非父子组件传值"],["02.组件/70.父组件调用子组件方法并传入值.md","父组件调用子组件方法并传入值"],["02.组件/75.插槽slot.md","插槽slot"],["02.组件/80.动态组件与 v-once 指令.md","动态组件与 v-once 指令"],["02.组件/90.vue父子组件的生命周期顺序.md","vue父子组件的生命周期顺序"]]},{"title":"过渡&动画","collapsable":false,"children":[["03.过渡&动画/110.transition过渡&动画.md","transition过渡&动画"],["03.过渡&动画/112.使用animate库.md","使用animate库"],["03.过渡&动画/120.transition-group列表过渡.md","transition-group列表过渡"]]},{"title":"可复用性&组合","collapsable":false,"children":[["04.可复用性&组合/01.Mixin混入.md","Mixin混入"]]},{"title":"工具","collapsable":false,"children":[["05.工具/10.Vue CLi v3 创建项目使用记录.md","Vue CLi v3 创建项目使用记录"]]},{"title":"规模化","collapsable":false,"children":[["06.规模化/100.vuex操作相关.md","vuex操作相关"],["06.规模化/140.路由懒加载.md","路由懒加载"]]},{"title":"其他","collapsable":false,"children":[["99.其他/80.节流函数封装（搜索框防多次请求）.md","节流函数封装（搜索框防多次请求）"],["99.其他/90.操作本地缓存.md","操作本地缓存"]]}],
|
||||
|
||||
}
|
||||
|
|
@ -276,7 +276,7 @@ body .home-content{
|
|||
text-align: center;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 280px;
|
||||
max-height: 192px;
|
||||
display: block;
|
||||
margin: 2rem auto 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@ permalink: /pages/8143cc480faf9a11
|
|||
---
|
||||
# new命令原理
|
||||
|
||||
使用new命令时，它后面的函数依次执行下面的步骤：
|
||||
|
||||
1. 创建一个空对象，作为将要返回的实例对象。
|
||||
2. 将这个空对象的原型，指向构造函数的prototype属性。
|
||||
3. 将这个空对象赋值给函数内部的this关键字。
|
||||
4. 开始执行构造函数内部的代码。
|
||||
5. 如果构造函数内有返回值且为对象类型，则返回该对象，否则返回上面创建的实例对象。
|
||||
|
||||
```js
|
||||
// 构造函数
|
||||
function Person(name,age){
|
||||
|
|
@ -12,13 +20,6 @@ function Person(name,age){
|
|||
this.age = age
|
||||
}
|
||||
|
||||
// 使用new命令时，它后面的函数依次执行下面的步骤。
|
||||
// 1、创建一个空对象，作为将要返回的实例对象。
|
||||
// 2、将这个空对象的原型，指向构造函数的prototype属性。
|
||||
// 3、将这个空对象赋值给函数内部的this关键字。
|
||||
// 4、开始执行构造函数内部的代码。
|
||||
// 5、如果构造函数内有返回值且为对象类型，则返回该对象，否则返回上面创建的实例对象。
|
||||
|
||||
// 自定义_new
|
||||
function _new() {
|
||||
// 将 arguments 对象转为数组
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
title: 初始化vue项目要做的一些工作
|
||||
date: 2020-02-21
|
||||
permalink: /pages/bc8edd16a03876a0
|
||||
---
|
||||
# 初始化vue项目要做的一些工作
|
||||
|
||||
在使用Vue CLi创建一个项目之后，正式进入开发前可能需要做一些工作，比如引入重置样式表、解决移动端点击300ms延迟等等。
|
||||
|
||||
## 重置样式表
|
||||
|
||||
为了统一每个浏览器的样式，以及去掉一些浏览器默认样式，需要加载引入重置样式表，常用的有 [normalize.css](http://necolas.github.io/normalize.css/)。或使用如下reset.css（可根据项目需要作修改）。
|
||||
|
||||
```css
|
||||
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
|
||||
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
|
||||
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
|
||||
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
|
||||
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
|
||||
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
|
||||
address,cite,dfn,em,i,optgroup,var{font-style:normal}
|
||||
table{border-collapse:collapse;border-spacing:0;text-align:left}
|
||||
caption,th{text-align:inherit}
|
||||
ul,ol,menu{list-style:none}
|
||||
fieldset,img{border:0}
|
||||
img,object,input,textarea,button,select{vertical-align:middle}
|
||||
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
|
||||
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
|
||||
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
|
||||
textarea{overflow:auto;resize:vertical}
|
||||
input,textarea,button,select,a{outline:0 none;border: none;}
|
||||
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
|
||||
mark{background-color:transparent}
|
||||
a,ins,s,u,del{text-decoration:none}
|
||||
sup,sub{vertical-align:baseline}
|
||||
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
|
||||
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
|
||||
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
|
||||
a {color: #25a4bb;text-decoration: none;}
|
||||
```
|
||||
|
||||
在main.js引入样式
|
||||
|
||||
```js
|
||||
import './assets/styles/reset.css'
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 解决移动端点击300ms延迟
|
||||
|
||||
通过npm安装 [fastclick](https://github.com/ftlabs/fastclick)
|
||||
|
||||
```sh
|
||||
npm install fastclick -S
|
||||
```
|
||||
|
||||
在main.js导入和使用
|
||||
|
||||
```js
|
||||
import fastClick from 'fastclick'
|
||||
fastClick.attach(document.body)
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
---
|
||||
title: 常用meta整理
|
||||
date: 2020-02-21
|
||||
permalink: /pages/8309a5b876fc95e3
|
||||
---
|
||||
# 常用meta整理
|
||||
|
||||
## <meta\> 元素
|
||||
|
||||
### 概要
|
||||
|
||||
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
|
||||
|
||||
|
||||
|
||||
**必要属性**
|
||||
|
||||
| 属性 | 值 | 描述 |
|
||||
| ------- | --------- | -------------------------------------- |
|
||||
| content | some text | 定义与http-equiv或name属性相关的元信息 |
|
||||
|
||||
**可选属性**
|
||||
|
||||
| 属性 | 值 | 描述 |
|
||||
| ---------- | ------------------------------------------------------------ | ----------------------------------- |
|
||||
| http-equiv | content-type / expire / refresh / set-cookie | 把content属性关联到HTTP头部。 |
|
||||
| name | author / description / keywords / generator / revised / others | 把 content 属性关联到一个name。 |
|
||||
| content | some text | 定义用于翻译 content 属性值的格式。 |
|
||||
|
||||
### 网页相关
|
||||
|
||||
- **申明编码**
|
||||
|
||||
```html
|
||||
<meta charset='utf-8' />
|
||||
```
|
||||
|
||||
- **优先使用 IE 最新版本和 Chrome**
|
||||
|
||||
```html
|
||||
<!-- 关于X-UA-Compatible -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 推荐 -->
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
|
||||
```
|
||||
|
||||
- **浏览器内核控制**：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。[参考文档](http://se.360.cn/v6/help/meta.html)
|
||||
|
||||
```html
|
||||
默认用极速核(Chrome)：<meta name="renderer" content="webkit">
|
||||
默认用ie兼容内核（IE6/7）：<meta name="renderer" content="ie-comp">
|
||||
默认用ie标准内核（IE9/IE10/IE11/取决于用户的IE）：<meta name="renderer" content="ie-stand">
|
||||
```
|
||||
|
||||
国内双核浏览器默认内核模式如下：
|
||||
|
||||
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
|
||||
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）
|
||||
|
||||
- **禁止浏览器从本地计算机的缓存中访问页面内容**：这样设定，访问者将无法脱机浏览。
|
||||
|
||||
```html
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
```
|
||||
|
||||
- **Windows 8**
|
||||
|
||||
```html
|
||||
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
|
||||
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
|
||||
```
|
||||
|
||||
- **站点适配**：主要用于PC-手机页的对应关系。
|
||||
|
||||
```html
|
||||
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
|
||||
<!--
|
||||
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
|
||||
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
|
||||
-->
|
||||
```
|
||||
|
||||
- **转码申明**：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。
|
||||
|
||||
```html
|
||||
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### SEO优化
|
||||
|
||||
[参考文档](http://msdn.microsoft.com/zh-cn/library/ff724016)
|
||||
|
||||
- **页面关键词**，每个网页应具有描述该网页内容的一组唯一的关键字。
|
||||
使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。
|
||||
|
||||
```html
|
||||
<meta name="keywords" content="your tags" />
|
||||
```
|
||||
|
||||
- **页面描述**，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
|
||||
|
||||
```html
|
||||
<meta name="description" content="150 words" />
|
||||
```
|
||||
|
||||
- **搜索引擎索引方式**，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。
|
||||
|
||||
```html
|
||||
<meta name="robots" content="index,follow" />
|
||||
<!--
|
||||
all：文件将被检索，且页面上的链接可以被查询；
|
||||
none：文件将不被检索，且页面上的链接不可以被查询；
|
||||
index：文件将被检索；
|
||||
follow：页面上的链接可以被查询；
|
||||
noindex：文件将不被检索；
|
||||
nofollow：页面上的链接不可以被查询。
|
||||
-->
|
||||
```
|
||||
|
||||
- **页面重定向和刷新**：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。
|
||||
|
||||
```html
|
||||
<meta http-equiv="refresh" content="0;url=" />
|
||||
```
|
||||
|
||||
- **其他**
|
||||
|
||||
```html
|
||||
<meta name="author" content="author name" /> <!-- 定义网页作者 -->
|
||||
<meta name="google" content="index,follow" />
|
||||
<meta name="googlebot" content="index,follow" />
|
||||
<meta name="verify" content="index,follow" />
|
||||
```
|
||||
|
||||
### 移动设备
|
||||
|
||||
- **viewport**：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<!--这是常用的移动meta设置-->
|
||||
```
|
||||
|
||||
1. width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
|
||||
2. height：高度（数值 / device-height）（范围从223 到10,000）
|
||||
3. initial-scale：初始的缩放比例 （范围从>0 到10）
|
||||
4. minimum-scale：允许用户缩放到的最小比例
|
||||
5. maximum-scale：允许用户缩放到的最大比例
|
||||
6. user-scalable：用户是否可以手动缩 (no,yes)
|
||||
|
||||
**注意**，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
|
||||
|
||||
- **WebApp全屏模式**：伪装app，离线应用。
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
|
||||
```
|
||||
|
||||
- **主题颜色**
|
||||
|
||||
```html
|
||||
<meta name="theme-color" content="#11a8cd">
|
||||
```
|
||||
|
||||
|
||||
|
||||
- **隐藏状态栏/设置状态栏颜色**：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
```
|
||||
|
||||
- **添加到主屏后的标题**
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-title" content="标题">
|
||||
```
|
||||
|
||||
- **忽略数字自动识别为电话号码**
|
||||
|
||||
```html
|
||||
<meta content="telephone=no" name="format-detection" />
|
||||
```
|
||||
|
||||
- **忽略识别邮箱**
|
||||
|
||||
```html
|
||||
<meta content="email=no" name="format-detection" />
|
||||
```
|
||||
|
||||
- **添加智能 App 广告条 Smart App Banner**：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。[参考文档](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)
|
||||
|
||||
```html
|
||||
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
|
||||
```
|
||||
|
||||
|
||||
|
||||
- **其他** [参考文档](http://fex.baidu.com/blog/2014/10/html-head-tags/?qq-pf-to=pcqq.c2c)
|
||||
|
||||
```html
|
||||
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
|
||||
<meta name="HandheldFriendly" content="true">
|
||||
<!-- 微软的老式浏览器 -->
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<!-- uc强制竖屏 -->
|
||||
<meta name="screen-orientation" content="portrait">
|
||||
<!-- QQ强制竖屏 -->
|
||||
<meta name="x5-orientation" content="portrait">
|
||||
<!-- UC强制全屏 -->
|
||||
<meta name="full-screen" content="yes">
|
||||
<!-- QQ强制全屏 -->
|
||||
<meta name="x5-fullscreen" content="true">
|
||||
<!-- UC应用模式 -->
|
||||
<meta name="browsermode" content="application">
|
||||
<!-- QQ应用模式 -->
|
||||
<meta name="x5-page-mode" content="app">
|
||||
<!-- windows phone 点击无高光 -->
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 一个常用的移动端页面meta设置
|
||||
|
||||
```html
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
```
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ features:
|
|||
imgname: /img/web.png
|
||||
- title: 页面
|
||||
details: html(5)/css(3)，前端页面相关技术
|
||||
url: /pages/0a83b083bdf257cb/
|
||||
url: /pages/8309a5b876fc95e3/
|
||||
imgname: /img/ui.png
|
||||
- title: 技术
|
||||
details: 技术文档、教程、技巧、总结等文章
|
||||
|
|
@ -69,7 +69,9 @@ footer:
|
|||
* [《TypeScript 从零实现 axios》](/pages/e05dce83e5129785/)
|
||||
|
||||
### 🗺️页面
|
||||
* HTML/CSS
|
||||
* HTML
|
||||
* [常用meta整理](/pages/8309a5b876fc95e3/)
|
||||
* CSS
|
||||
* [flex布局语法](/pages/0a83b083bdf257cb/)
|
||||
* [flex布局案例-圣杯布局](/pages/df9e7c7214fa5046/)
|
||||
* [CSS3之animation动画](/pages/c2c0432138f6e042/)
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ vm.items.splice(indexOfItem, 1, newValue)
|
|||
|
||||
你也可以使用 [`vm.$set`](https://cn.vuejs.org/v2/api/#vm-set) 实例方法，该方法是全局方法 `Vue.set` 的一个别名：
|
||||
|
||||
```js
|
||||
```js
|
||||
vm.$set(vm.items, indexOfItem, newValue)
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
title: Vue CLi v3 创建项目使用记录
|
||||
date: 2020-02-20
|
||||
permalink: /pages/d00311f8174119b2
|
||||
---
|
||||
# Vue CLi v3.x 创建项目使用记录
|
||||
|
||||
[官方文档](https://cli.vuejs.org/zh/)
|
||||
|
||||
以下使用的CLi版本是 v3.11.0
|
||||
|
||||
## vue create
|
||||
|
||||
1. 运行以下命令来创建一个新项目
|
||||
|
||||
```sh
|
||||
vue create hello-world
|
||||
```
|
||||
|
||||
2. 你会被提示选取一个 preset (预设)。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
|
||||
|
||||
```sh
|
||||
Vue CLI v3.11.0
|
||||
? Please pick a preset: (Use arrow keys)
|
||||
> default (babel, eslint)
|
||||
Manually select features (手动选择特性)
|
||||
```
|
||||
|
||||
默认预设只包含Babel + ESLint，如需要使用到Router、CSS Pre-processors（CSS预处理器）等需要选手动选择特性。
|
||||
|
||||
3. 手动选择特性
|
||||
|
||||
```sh
|
||||
Vue CLI v3.11.0
|
||||
? Please pick a preset: Manually select features
|
||||
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
|
||||
>(*) Babel # 将现代JS转成旧版本（出于兼容性考虑）
|
||||
( ) TypeScript # 添加对TS的支持
|
||||
( ) Progressive Web App (PWA) Support # 渐进式Web应用程序（PWA）的支持
|
||||
( ) Router # 路由
|
||||
( ) Vuex # 状态管理
|
||||
( ) CSS Pre-processors # css预处理器
|
||||
(*) Linter / Formatter # 使用ESLint检查代码质量
|
||||
( ) Unit Testing # 单元测试
|
||||
( ) E2E Testing # E2E测试
|
||||
```
|
||||
|
||||
> 图形化界面有对特性的介绍
|
||||
|
||||
4. 使用路由器的历史记录模式？（需要适当的服务器设置才能在生产中进行索引回退）通过使用HTML5历史记录API，URL不再需要'＃'字符。
|
||||
|
||||
```sh
|
||||
Vue CLI v3.11.0
|
||||
? Please pick a preset: Manually select features
|
||||
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
|
||||
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
|
||||
```
|
||||
|
||||
5. 选择css预处理器
|
||||
|
||||
```sh
|
||||
Vue CLI v3.11.0
|
||||
? Please pick a preset: Manually select features
|
||||
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
|
||||
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
|
||||
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
|
||||
Sass/SCSS (with dart-sass)
|
||||
Sass/SCSS (with node-sass)
|
||||
Less
|
||||
> Stylus
|
||||
```
|
||||
|
||||
6. 选择ESLint配置
|
||||
|
||||
```sh
|
||||
Vue CLI v3.11.0
|
||||
? Please pick a preset: Manually select features
|
||||
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
|
||||
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
|
||||
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
|
||||
? Pick a linter / formatter config: (Use arrow keys)
|
||||
ESLint with error prevention only
|
||||
ESLint + Airbnb config
|
||||
> ESLint + Standard config (标准配置)
|
||||
ESLint + Prettier
|
||||
```
|
||||
|
||||
7. 选择附加的lint特性？
|
||||
|
||||
```sh
|
||||
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
|
||||
>(*) Lint on save （保存时检查lint）
|
||||
( ) Lint and fix on commit （提交时 lint 和 fix）
|
||||
```
|
||||
|
||||
8. 你喜欢把配置放在什么地方？比如Babel、PostCSS、ESLint等配置
|
||||
|
||||
```sh
|
||||
Vue CLI v3.11.0
|
||||
? Please pick a preset: Manually select features
|
||||
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
|
||||
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
|
||||
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
|
||||
? Pick a linter / formatter config: Standard
|
||||
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
|
||||
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
|
||||
> In dedicated config files (在专用的配置文件)
|
||||
In package.json (在package.json)
|
||||
```
|
||||
|
||||
9. 将这次已选项保存为一个将来可复用的 preset （预设）？
|
||||
|
||||
```sh
|
||||
Vue CLI v3.11.0
|
||||
? Please pick a preset: Manually select features
|
||||
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
|
||||
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
|
||||
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
|
||||
? Pick a linter / formatter config: Standard
|
||||
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
|
||||
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
|
||||
? Save this as a preset for future projects? (y/N)
|
||||
```
|
||||
|
||||
> ~/.vuerc
|
||||
>
|
||||
> 被保存的 preset 将会存在用户的 home 目录下一个名为 `.vuerc` 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
|
||||
|
||||
|
||||
|
||||
## 图形化界面
|
||||
|
||||
对于Vue CLi使用还不是特别熟悉的同学，可以使用图形化界面。运行以下命令会自动打开界面
|
||||
|
||||
```sh
|
||||
vue ui
|
||||
```
|
||||
|
||||
> 图形化界面有中文系统，直观的功能界面，以及特性的介绍等。
|
||||
|
||||
Loading…
Reference in New Issue