.sync 修饰符的用法

子组件代码

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>
阅读全文
Vue + TypeScript

项目相关配置在哪里写?

由于采用vue-cli@3.x版本来初始化工程,所以没有了2.x版本对外暴露的webpack配置文件,所以如果相对项目进行一些配置,需要在项目根目录下新建vue.config.js.
比如需要修改项目启动的端口号,去掉打包后文件名的哈希值,如下:

1
2
3
4
5
6
7
module.exports = {
baseUrl: '/', // 默认为根目录下 '/'
devServer: {
port: 8989
},
filenameHashing: false
}

Vue.prototype 定义的全局变量无法使用

如果在main中定义了一个全局变量

1
2
import apiConfig from "@/apiConfig";
Vue.prototype.apiConfig = apiConfig;

但是在组件中无法使用该变量,需要在 .d.ts 文件中加入如下代码:

1
2
3
4
5
6
import Vue from "vue";
declare module "vue/types/vue" {
interface Vue {
apiConfig: any;
}
}

以上代码可在官方文档找到

阅读全文
更换主题颜色
  1. 把 css 文件放到服务器上,通过 XMLHttpRequest 请求文件,获取到文件内容之后替换颜色。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    getFile(url: string) {
    return new Promise((resolve, reject) => {
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.responseType = "text";
    client.onreadystatechange = () => {
    if (client.readyState !== 4) {
    return;
    }
    if (client.status === 200) {
    const urlArr = client.responseURL.split("/");
    resolve({
    data: client.response,
    url: urlArr[urlArr.length - 1],
    });
    } else {
    reject(new Error(client.statusText));
    }
    };
    client.send();
    });
    }

    getIndexStyle() {
    this.getFile("//doc.mamaezhan.com/web/my_theme.css")
    .then(({data}: any) => {
    this.originalStyle = this.getStyleTemplate(data);
    this.writeNewStyle();
    });
    }
阅读全文
cli 脚手架工具封装

工程结构

工程目录结构如下
/bin # —— 命令执行文件
/lib # —— 工具模块
package.json

使用 commander.js 开发命令行工具

nodejs 内置了对命令行操作的支持,node 工程下 package.json 中的 bin 字段可以定义命令名和关联的执行文件。

1
2
3
4
5
6
7
8
{
"name": "demo-cli",
"version": "1.0.0",
"description": "我的cli",
"bin": {
"demo": "./bin/demo.js"
}
}

在bin目录下创建一个 demo.js 文件,用于处理命令行的逻辑。
在 demo.js 中编写命令行的入口逻辑

1
2
3
4
5
6
7
8
#!/usr/bin/env node

const program = require('commander') // npm i commander -D

program.version('1.0.0')
.usage('<command> [项目名称]')
.command('hello', 'hello')
.parse(process.argv)

接着,在 bin 目录下创建 demo-hello.js,放一个打印语句

1
2
touch ./bin/demo-hello.js
echo "console.log('hello, commander')" > ./bin/demo-hello.js

这样,通过 node 命令测试一下

1
node ./bin/demo.js hello

可以在终端上看到一句话:hello, commander。

阅读全文
Vue 遍历本地图片

需要循环遍历本地图片地址时,打包后会出现图片找不到,解决方法,可以把图片通过 js import 进来,之后使用 import 的变量来循环

阅读全文
遍历菜单数组,获取选中的子节点的所有父节点元素

遍历菜单数组,获取选中的子节点的所有父节点元素

  1. 假设有一个数组如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    let menus = [
    {
    key: "menu1",
    label: "一级菜单1",
    icon: "",
    },
    {
    key: "menu2",
    label: "一级菜单2",
    icon: "",
    },
    {
    key: "menu3",
    label: "一级菜单3",
    icon: "",
    children: [
    {
    key: "menu3_1",
    label: "一级菜单3_1",
    icon: "",
    children: [
    {
    key: "menu3_1_1",
    label: "一级菜单3_1_1",
    icon: "",
    },
    ],
    },
    {
    key: "menu3_2",
    label: "一级菜单3_2",
    icon: "",
    },
    ],
    },
    {
    key: "menu4",
    label: "未开发页面演示",
    icon: "",
    },
    ];
  2. 需要获取到选中菜单 menu3_1_1 的所有父元素,即 menu3,menu3_1 和 menu3_1_1,js 代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    /**
    * selectMenus 切换菜单时候触发的事件,参数为更改的菜单 key
    * breadCrumb 选中菜单的所有父元素的数组集
    */
    let breadCrumb = [];
    // 遍历菜单
    function eachMenus(item, name) {
    for (let i = 0, j = item.length; i < j; i++) {
    breadCrumb.push(item[i].label);
    if (item[i].children) {
    eachMenus(item[i].children, name);
    } else {
    if (item[i].key === name) {
    return;
    } else {
    breadCrumb.splice(this.breadCrumb.length - 1, 1);
    }
    }
    }
    breadCrumb.splice(this.breadCrumb.length - 1, 1);
    }

    function selectMenus(name) {
    breadCrumb = [];
    eachMenus(menus, name);
    }
阅读全文
Hexo 配置 Aloglia

首先注册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

阅读全文
WebScoket 实现

npm 安装 websocket 包

服务端代码

  1. 新建一个 js 文件,如: ws_server.js
  2. 引入 websocket 包,并且 new 一个 websocket server

    1
    2
    var WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 9999});
  3. 定义一个数组用来存放连接的用户

    1
    2
    // 连接池
    var clients = [];
  4. 监听 wss ,当有用户加入时,把该用户加入连接池,当某个用户发送消息当时候,循环连接池,把消息推送给每一位用户,当用户退出时,将其移出连接池

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    wss.on('connection', function (ws) {
    // 将该连接加入连接池
    clients.push(ws);
    ws.on('message', function (message) {
    console.log(message);
    // 广播消息
    clients.forEach(function (ws1) {
    if (ws1 !== ws) {
    ws1.send(message);
    }
    })
    });

    ws.on('close', function (message) {
    // 连接关闭时,将其移出连接池
    clients = clients.filter(function (ws1) {
    return ws1 !== ws
    })
    });
    });
  5. 使用 node 启动该服务

    1
    node ws_server.js
阅读全文
基于 Vue 脚手架遍历目录文件自动生成路由

require.context

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

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

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

阅读全文
Linux 配置 Hexo + Git 环境

linux 源码包安装

  1. wget http://xxxx 获取源码包
  2. 解压,tar zxvf xxx.tar.gz
  3. ./configure –prefix=/usr/local/xxx 指定安装路径
  4. make 编译
  5. make install 安装
  6. 配置环境变量
    1
    vim /etc/profile

然后在文件的最后一行,添加下面的内容,然后保存退出。

1
export PATH=$PATH:/usr/local/git/bin

使用 source 命令生效。

1
source /etc/profile

阅读全文
Algolia