这是我参与「第五届青训营 」伴学笔记创作活动的第 六 天
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命令就可以
开始下载依赖
编译好后可以使用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') }