IPFS
https://zhuanlan.zhihu.com/p/32615963
https://www.zhihu.com/question/393373837
NFT
https://zhuanlan.zhihu.com/p/365263479
我和萌萌的照片
QmebgdHqSG8ShReW9sbvc5zP124Fc8Ux6x7B7k69wAn5CA
下载使用 ipfs
https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html
在文章的末尾,下载 apk,安装到 android 手机上。启动后,输入安装到该手机上的应用的包名,点击 Get Signature 就可以获取到了。如果是错误的包名,那是获取不到的。
当后端接口还没有完成的时候,前端没必要等。可以自己使用 mock 来构建服务端接口的环境和数据。自己动手,丰衣足食。
安装
pnpm add mockjs vite-plugin-mock -D
配置
在 vite.config.ts 中配置
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteMockServe({
supportTs: true,
mockPath: "./src/mock/source", // 解析,路径可根据实际变动
localEnabled: true, // 开发环境设为true,
prodEnabled: false, // 生产环境设为true,也可以根据官方文档格式
injectCode:
` import { setupProdMockServer } from './src/mock';
setupProdMockServer(); `,
watchFiles: true, // 监听文件内容变更
injectFile: resolve("src/main.ts"), // 在m
})
]
})
新建数据
在 src/mock/source 下新建 user.ts 文件,内容如下:
export default [
{
url: "/api/users",
method: "GET",
response: () => {
return {
code: 0,
message: "success",
result: {
nickname: '神奇动物在哪里',
gender: 1
},
};
}
}
]
使用
import axios from 'axios'
axios.create({
baseURL: import.meta.env.VITE_BASE_URL
})
axios.get("/api/users").then(res => { console.log(res); });
运行起来,看到控制台的网络中请求的状况:
请求网址: http://localhost:3000/api/users
请求方法: GET
状态代码: 200 OK
远程地址: 127.0.0.1:3000
引荐来源网址政策: strict-origin-when-cross-origin
# response
{code: 0, message: "success", result: {nickname: "神奇动物在哪里", gender: 1}}
code: 0
message: "success"
result: {nickname: "神奇动物在哪里", gender: 1}
gender: 1
nickname: "神奇动物在哪里"
原子化 css 的好用是真的好用。
https://antfu.me/posts/reimagine-atomic-css-zh
https://juejin.cn/post/7028841960752283656
https://blog.csdn.net/qq_41499782/article/details/124074678
https://blog.csdn.net/sg_knight/article/details/124097860
https://github.com/unocss/unocss
使用 unocss
https://github.com/unocss/unocss
class 可以参考参考
https://www.tailwindcss.cn/docs/align-items
这里用 pnpm 来安装。
- 安装添加
pnpm add unocss -D
- 添加到 vite.config.ts 中
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Unocss({})
]
})
- main.ts 中引入
import 'uno.css'
- 项目中使用
<div class="w-300px h-120px rounded-8px m-20px shadow-md">
</div>
仅仅用样式就可以实现宽300像素高120像素圆角8像素 margin 20 像素,带 md 程度的阴影的div盒子。这样多方便呀。
当你已经在使用了,可以通过 http://localhost:3000/__unocss 查看生成的 css 文件,是不是很人性化,文件量还小。
vue 面试题
都说 pnpm vite vue 组合好。那就试试。
# shenya 是项目名
pnpm create vite shenya
cd shenya
pnpm install
pnpm run dev
如果从来没有使用过 pnpm,第一次创建的时候是要花一点时间。后边就是秒创建了哈。