前言

在setup()中手动暴露状态和方法会很冗长。幸运的是,只有在不使用构建步骤时不是必要的.当使用单文件中，我们可以通过<script setup>大大简化使用

参考链接

前言

最近再写弹框组件时 通过调用函数的方式调用弹框 需要获取到组件实例 在此总结一下

前言

一直以来都很想实现一个拖拽改变列宽的 table 组件,这几天终于有机会去研究它。哈哈，笔者不才，没能自己实现，还是去网上找了个案例，研究了下。

乍一看好像挺简单的 其实就是原生 js 那些事，还是自己基础太差,想的太复杂了。

添加入口文件 src/lib/index.ts

1

export { default as Button } from './Button.vue'

2

export { default as Switch } from './Switch.vue'

3

// 相当于 

4

// import Switch from './Switch.vue'

5

// export { Switch }

如何使用cli

在《写一个cli脚手架中》使用了npm link 来使用 my-cli
但是使用npm link 只是为了方便在开发的时候测试 但是我们要想在一个项目中使用脚手架的命令怎么用呢？

很简单 直接

1

npm install <cli-package-name>

1 新建项目目录

1

mkdir my-cli

2

cd my-cli

3

npm init —y  # 生成package.json 文件

2 新建 bin 目录 创建脚本 test.js

1

#!/usr/bin/env node       //指定一个解释器  告诉shell 用node解释器去执行脚本

2

console.log('test')

卸载之前的node

1

brew uninstall node --force

2

sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

3

4

sudo npm uninstall npm -g

5

sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*

6

sudo rm -rf /usr/local/include/node /Users/$USER/.npm

7

sudo rm /usr/local/bin/node

8

sudo rm /usr/local/share/man/man1/node.1

9

sudo rm /usr/local/lib/dtrace/node.d

安装nvm

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

npm link 分为两个步骤

Package linking is a two-step process.

• npm link
• npm link package-name

将原本需要通过传入回调参数来实现回调执行改为利用promise.then的方式来调用,或者通过 async/await 的方式调用 从而实现逻辑上的同步操作。

实现原理:

改变callback 在执行callback 的时候将参数resolve 出去 这样就可以在执行函数的时候拿到回调函数的参数 再执行真正的callback

在写xinyi-ui的时候就想实现一个展示demo 并显示源代码的功能 了解到custom-block这个功能

这个问题折腾了我一整天,不过真是不负有心人,还好我没有放弃,现在对vite的原理不是很了解,只是记一下步骤,等以后再看吧

参考链接

• vite插件API
• custom-block
• vue3.0中compiler-core
• @vitejs/plugin-vue