浅入系列

本次笔记的原则： 创建基于成果的任务 写下要做的行动 记录执行过程中遇到的问题和思考 目标:发布一个能够展示上传图片的组件至npm上，并且能够在其他项目中使用 Steps 1.使用vue-cli初始化项目 2.实现能够上传图片并显示的组件 <template> <div class="special-upload"> <h2>File Uploader</h2> <input type="file" @change="loadFile" accept="image/*" > <img ref="output" width="200"> </div> </template> <script> export default { name:"SpecialUpload", data() { return { } }, methods: { loadFile(event){ this.$refs.output.src = URL.createObjectURL(event.target.files[0]) } }, } </script> <style> .special-upload { width: 300px; height: 400px; border: 1px solid black; text-align: center; } </style> 3.使用vue-cli来实现打包配置 遇到的问题： 在其他项目中使用打包后的js文件报错，关闭eslint解决，我一开始还以为是不支持使用umd,一开始无法使用可能是因为打包的时候出现了冗余的代码吧 //在package.json配置，使用脚手架提供的内置打包配置 "build-lib":"vue-cli-service build --target lib --name special-upload ./src/index.js", 2....

背景：因为第一次部署博客在GitHub上，想要实现自动化更新部署，但是由于不熟悉GitHub actions，所以写下本篇浅入一下。 一、什么是Github actions? 简单来说，就是由GitHub作为平台提供给开发者自动化工作流的方案，其中比较常见的工作流就是CI/CD 二、常见的工作流有哪些？ 用户提交issue -> 检测是否重要/次要 -> 是否可重现 ->分配给相应的contributer 提交pull request -> review code -> 合并分支 合并分支 -> 测试 -> 构建 ->部署 而action的出现就是为了自动化上述操作。 三、Github actions的工作原理 事件监听->执行工作流 四、为什么选择Github actions? 代码大部分时间是部署在GitHub上的，所以无需接入其他第三方CI/CD tool 不需要去手动安装环境，可以自定义指定环境版本 GitHub提供了一个官方市场，可以复用其他人的actions 五、workflow文件语法 name: Greeting from Mona #定义workflow名称，可选参数 # 定义trigger event on: push: branches:[ master ] pull_request: branches:[ master ] jobs: my-job: name: My Job runs-on: ubuntu-latest #指定运行的虚拟机环境 steps: - name: Print a greeting # 指定环境变量 env: MY_VAR: Hi there!...