1. 打开 mac 终端
2. 在菜单栏中找到 Shell->新建远程链接
3. Shell 中新增服务器配置

1
2
3
4

ssh root@localhost -p 29180
# root        - 用户名
# localhost   - ip
# 29180       - 端口

首先注册Algolia账户

Algolia 登陆页面，可以使用 GitHub 或者 Google 账户直接登录，也可以注册一个新账户。我直接用谷歌账户登陆了，注册后的 14 天内拥有所有功能（包括收费类别的）。之后若未续费会自动降级为免费账户，免费账户 总共有 10,000 条记录，每月有 100,000 的可以操作数。

注册完成后，创建一个新的 Index，这个 index name 之后会用到

Index 创建完成后，此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展， 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录，执行命令安装：

npm install hexo-algolia –save # 目前最新版本是1.2.4，下面的操作都是基于这个版本的文档

复制代码获取 Key，更新站点根目录配置

前往站点根目录打开_config.yml添加以下代码

Algolia Search API Key

1
2
3
4

algolia:
  applicationID: '你的Application ID'
  apiKey: '你的Search-Only API Key'
  indexName: '输入刚才创建index name'

复制代码修改Algolia搜索ACL（访问控制列表）

选中后保存。
操作完成后执行命令

1
2

export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API key
set (Mac和git bash 为 export) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY     #查看是否设置成功如果没有值就设置失败

查看环境变量HEXO_ALGOLIA_INDEXING_KEY是否已经存在

1
2
3

export | grep ALGOLIA

hexo algolia

如果出现下面的0 posts indexed，先执行命令：hexo clean

1
2
3
4
5
6

INFO  93 files generated in 197 ms
INFO  0 posts collected
INFO  Clearing index on Algolia...
INFO  Index cleared
INFO  Indexing posts on Algolia...
INFO  Indexation done. 0 posts indexed.

小程序开发中碰到的问题记录

• 在json中配置usingComponents来引用组件需要使用相对路径
• 引入本地数据需要使用相对路径
• 引用图片需要使用绝对路径
• 组件中使用properties来接收数据，需要定义接收数据的类型
• catchtap会阻止冒泡事件，bindtap 不会阻止冒泡事件。点击事件需要获取到变量值，如当前的索引，可通过 data-index 传递数据，随后在 js 中通过 e.target.dataset.index 获取到
• cover-image 和 cover-view 最好放到 camera，map 等标签内部，否则在真机上面有可能不显示
• textarea 标签会覆盖在其他标签之上
• 使用 button::after{ border: none; } 来去除边框
• setData()为数组时，不能传入 i 为变量，只能写死i的值
  如果需要动态的设置数组中的某个值：

  1 2 3 4

  this.data.arr[i] = xxx; this.setData({ arr: this.data.arr })

1. 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

2. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

3. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

4. 当需要设置的样式很多时设置className而不是直接操作style。

5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

6. 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

7. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

8. 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

   对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

OSS 前端自动化部署：

使用 node.js 或 python。

阿里云官方文档（使用 nodejs）

快速入门

OSS（options）中的各个配置项说明如下：

• [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
• [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
• [stsToken] {String}：使用临时授权方式，详情请参见使用 STS 进行临时授权。
• [bucket] {String}：通过控制台或PutBucket创建的bucket。
• [endpoint] {String}：OSS域名。
• [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
• [internal] {Boolean}：是否使用阿里云内网访问，默认false。比如通过ECS访问OSS，则设置为true，采用internal的endpoint可节约费用。
• [cname] {Boolean}：是否支持上传自定义域名，默认false。如果cname为true，endpoint传入自定义域名时，自定义域名需要先同bucket进行绑定。
• [isRequestPay] {Boolean}：bucket是否开启请求者付费模式，默认false。具体可查看请求者付费模式。
• [secure] {Boolean}：(secure: true)则使用HTTPS，(secure: false)则使用HTTP，详情请查看常见问题。
• [timeout] {String|Number}：超时时间，默认60s。

Markdown 语法主要分为如下几大部分：
标题，段落，区块引用，代码区块，强调，列表，分割线，链接，图片，反斜杠 \，符号’`’。

事件分发

• 事件分发 vm.$emit 和监听 vm.$on 必须绑定在同一个 vm 上
• 创建一个 eventHub.js 文件如下：

  1 2 3 4 5

  import Vue from "vue"; // 用来存放分发的事件$emit,$on export default new Vue(); // export let eventHub = new Vue(); // 使用上面这种写法在import时需要加{}：import { eventHub } from '@/common/js/eventHub.js';

• 使用 eventHub.$emit(‘fun1’,e)来分发事件，使用 eventHub.$on(‘fun1’,fun2)来监听事件

子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
    <input v-model="value">
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            value: ''
        }
    },
    watch: {
        value(newValue, oldValue) {
            this.$emit('update:title', newValue)
        }
    }
}
</script>

父组件代码

1. 某些情况下，我们需要子组件改变某个值的时候，父组件的值也更改，常规的实现方法如下：

   1 2 3 4 5

   // 父组件中有个 title 的值传递到子组件中 <text-document :title="title" @update:title="title = $event" ></text-document>

2. 通过 .sync 修饰符，可以简写父组件，子组件中增加的方法不变：

   1 2	// 父组件写法 <text-document :title.sync="title"></text-document>

require.context

你还可以使用 require.context() 方法来创建自己的（模块）上下文。

你可以给这个方法传 3 个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，以及一个匹配文件的正则表达式。

webpack 会在构建的时候解析代码中的 require.context() 。

先升级 npm 可能会导致 nodejs 和 npm 版本不一致，无法安装其他包

npm 安装包失败可尝试以下命令：

1
2

sudo chown -R $USER:$GROUP ~/.npm
sudo chown -R $USER:$GROUP ~/.config

或

1

sudo npm install -g --unsafe-perm=true --allow-root

安装 node-sass 失败

1

sudo npm install node-sass@4.11.0 --unsafe-perm=true --allow-root