vue.js|青训营笔记

77 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 六 天 pnpm的配置 现在全局安装pnpm,注意用管理者模式打开 npm install -g pnpm
不开管理者会报错,金山毒霸好像识别报错,建议关闭去安装
PS C:\WINDOWS\system32> npm install pnpm -g npm WARN config global --global, --localare deprecated. Use--location=global` instead.

changed 1 package, and audited 3 packages in 20s

found 0 vulnerabilities显示这样大概就是安装成功了,可以设置一下以后的镜像pnpm config set registry registry.npm.taobao.org/ pnpm config get registry ` 然后就可以用vs打开项目,如果项目没有node_module就需要先编译一下,用终端pnpm i命令就可以

image.png 开始下载依赖
编译好后可以使用pnpm dev运行项目

总结

整体来说和npm差别不大,使用过程中确实感觉比npm下载包更快一些。

编写组件

export .... from .... 从我们编写好的组件去放出去接口,export命令用于规定模块的对外接口
ES6属于静态加载
import用于加载模块 props中可以定义多个prop,分别制定其属性用于限制其输入值,定义好后其他组件就可以调用此组件的prop进行赋值,展现。
必传属性: required:true
props里面的属性是只读,如果要修改就是data里面
处理字符串的过滤validator,可以自定义验证规则
在props中可以控制主题
default: 'default',默认是什么. 最后把组件导出,挂载在Vue实例上, 在调用的vue里面的compute里面return用户输入的对应类型,类型名自定义 导出组件
import ele from './button.vue' ele.install = function(app){ app.component(ele.name, ele); app.component('yButton', ele); } export default ele; 上传文件的逻辑
const [ uploadRef, handleRemove, beforeFileUpload, handleFileSuccess, handleExceed ] = useUploadFile(props, handleValueChange)
代码上传 const handleFileSuccess: UploadProps['onSuccess'] = ( response, uploadFile ) => { handleValueChange(uploadFile.raw, 'file') }