NPM依赖包升级
上一篇文章介绍了vue-cli和create-vue两款vue脚手架，现在官方已经推荐使用creat-vue进行项目的构建，知道cli是基于webpack构建的，每次都需要全部打包构建，而vite就不需要，所以vite速度是更快的。 还得说一下，因为今天用vue-cli脚手架生成项目，发现上篇文章说最后版本是5.0.7是不对的哈，抱歉，应该是停留在2022年7月7日的V5.0.8版本。 那么对于一些以前基于webpack的vue应用项目，如果转向vite，应用代码是需要改动的，如果项目比较复杂的话，就还是比较麻烦。么如何从Vue CLI迁移到Vite的内容，我需要另写一篇来介绍，感兴趣的可以先看下这篇内容： https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/ 那么，如果是vue cli创建的项目，那么npm依赖包的更新是必要的。所以来分享如何进行依赖包的更新。 npm更新依赖包： 先看下package.json中的版本基础知识： 1、依赖包的版本号使用的是语义化版本规范（Semantic Versioning），也称为SemVer。这个规范定义了版本号的格式和含义，它由三个部分组成：主版本号、次版本号和修订号。
VUE脚手架
vue-cli 仓库地址： https://github.com/vuejs/vue-cli/tree/dev 访问地址: https://cli.vuejs.org/ 版本已停留在2022年7月7日：V5.0.8 官方已经提示: Vue CLI 处于维护模式！
后端语言
今天没有学习后端相关知识。
VUE笔记
vue核心概念总结 响应式数据 (Reactive Data): Vue.js 的一个核心特性是数据的响应式。这意味着当数据发生变化时，相关的视图会自动更新。你可以使用 data 对象来定义响应式数据，并在模板中使用它们。 模板 (Templates): Vue.
VUE核心概念
今天收到了阿里的人工智能模型“通义千问”的内测资格，试了一下，我也非专业人士，就不瞎评测了。只是对比百度文心一言，个人感觉不相上下，离chatgpt还是有一点差距的。但是对于一些简单问题或者代码编写还是完全够用的，心底里还是很欣慰的，毕竟有更多的选择对我们普通人是更友好的。 官网： https://qianwen.aliyun.com/ 上次分享了使用vue+ts+vite+antd+pnpm编写了一个简单的应用，在这里面我们其实就是一个熟悉前端工程化的过程，antd是ui组件、pnpm是包管理器，ts是js的超集，可以在编译时进行检查，而vite又是一个快速开发构建的工具，可以快速启动开发服务器并进行代码的编译和打包，支持热更新。总之利用这些工具和方法，能够大大的提升开发的效率。 今天就开始一点点根据自己收获进行分享： 1、ts（TypeScript）是js的超集，可以编译成普通的js，支持任意浏览器，任意系统，并且开源。怎么理解超集，简单理解应该是ts兼容js，但ts有更强大的功能。就是说ts是基于js基础上多了一个类型系统，可以在编译前帮你检查出错误，可以避免因为js没有类型约束导致的一些BUG，而往往这些BUG只有在运行的时候才能发现，会导致生产的故障。ts在编译的时候先将代码编译成js，才能在浏览器或者nodejs中执行。 如果对于ts还不太熟悉的话，就直接先上官网研究一下，如果会js的话，上手ts还是很容易，总之最好就是一边写一边学，效果会豪横多。 官网：https://www.typescriptlang.org/ 中文文档：https://typescript.bootcss.com/index.html 2、vue3对ts提供了更好的支持，vue2相对较弱，需要额外配置和插件来实现。vue2.7是当前也是最后一个vue2.x次级版本更新，Vue 2 的终止支持时间是 2023 年 12 月 31 日。在此之后，Vue 2 在已有的分发渠道 (各类 CDN 和包管理器) 中仍然可用，但不再进行更新，包括对安全问题和浏览器兼容性问题的修复等。技术更新迭代很快，所以当下学习vue3是主流。官网如是说： Vue 本身就是用 TypeScript 编写的，并对 TypeScript 提供了一等公民的支持。所有的 Vue 官方库都自带了类型声明文件，开箱即用。
使用VUE+TS+ANTD+PNPM实现天气查询应用
上一篇介绍了前端工程化的一些东西，说要从vue开始学习，那么相比理论，直接进行开发实例能够更好的理解工程化带来的便利。说说今天要做的小应用，上一篇介绍了轮播图，这次就是查询天气卡片显示。 先说说实现的核心思路： 1、监听城市名 2、接口请求 3、接口数据返回 4、动态渲染页面 看看实现的完成图： 那么这个天气数据哪里来呢？就是三方的天气API接口，比如国家气象数据中心，实名注册后每天有20次调用次数，足够使用了，也可以使用第三方平台给的接口，可以自己搜索。 API地址： https://data.cma.cn/site/apidoc.html
前端工程化
今天和一个资深的前端开发前辈聊了聊，我说作为一个非专业的前端爱好者，该怎么快速学习前端的知识。这位前辈这样说，“你应该庆幸你是因为爱好才学习前端知识，而不是为了谋生而学习。还有从开始就不要把自己作为一个业余的开发者去学习，只要是你爱好的就应该成为学习动力，努力之后一定可以成为专业的开发者。”这番话对我感触挺大的，有爱好并为之努力，一定可以收获更多。 然后这个前辈就分享了以前学习前端的过程，就是先用记事本写HTML页面结构，然后加入CSS进行排版美化页面，后来再写一些js代码增加交互功能，根据实际需求，需要多少页面就创建多少个页面。 但现在的前端开发，早就进入了工程化开发的时代，已经存在有各种现代化的框架，编译工具以及预处理器等等。 下面就传统和工程化的前端开发优劣介绍下： 传统开发：没有采用工程化工具和流程的情况下进行开发，通常需要开发者手动管理文件、依赖和构建过程。 优势： 1、入门快，不需要额外学习配置工具和流程 2、灵活，根据需求喜好选择合适工具，直接操作DOM 3、轻量：没有复杂的构建和工具依赖，项目体积小 劣势： 1、效率低，手动管理较多，缺乏自动化工具和流程 2、维护难，没有统一的代码风格，团队协作难 3、难扩展，缺少模块化和组件化
下半年运维开发写作计划
转眼间上半年已过去，下半年已经开始了，努力搬砖中！这周打算主要介绍前端相关知识，奈何搬砖过程中遇到不少问题，暂时只能是想到哪写哪，先记录起来，后面抽空再统一整理。 截止今天，自己分享的已经从前后端开发到自动部署的基础知识都有所涉及了，上篇分享的gitlab-ci流程已经弄完了，不过都是用shell执行器实现的，文件内容就很简单，直接打包拷贝到nginx服务器而已。因为docker执行器一个是对于简单项目来说构建时间久，还有就是因为有网络环境隔离的原因，操作起来不是那么方便。 上半年运维开发写作计划中，从3月到6月主要就是从计算机基础、开发基础、前后端学习，以及开源项目的学习和开发这几个方面来写的。分享的基本都是基础知识，其实也是自己学习的过程，文章内容基本都是安装操作以及相关基础知识之类的。 https://mp.weixin.qq.com/s?__biz=Mzg2OTY1ODU4NA==&mid=2247485673&idx=1&sn=57dc973e6be7b79130cf4f48a1490c27&chksm=ce98f25ef9ef7b48bd8b2b367e16f38644e17da23fe93078c58a63db401f78bbb27117b4cdef&token=1357150504&lang=zh_CN#rd 那么下半年还是持续分享这几方面的知识，但是对自己的所写的文章要求肯定会高一点，一方面是督促自己，另一方面也是对自己读者的负责，毕竟已经有不少读者的关注，还是压力蛮大的。 “下半年就开始着重某一个点，比如从实战项目中涉及的知识点由浅到深解析学习，详细计划根据实际情况选择展开。”这是上半年说的，只是一个大概描述，我后来想了一下就拆分如下： 主要就四件事： 1、基础知识巩固 2、前后端语言以及云原生的持续学习 3、开源项目的维护
放空
放空的一天！
DOCKER执行器自动化部署VUE项目
今天接着上次，使用gitlab中的cicd功能自动部署vue项目，如果全部使用shell执行器，肯定是可以的，就是要提前在runner宿主机或者远程部署主机上安装好node环境以及其他依赖的环境，这里今天尝试的是docker执行器，构建操作在docker中完成。 首先是chatgpt给的CI的范例： 定义一个stages阶段，包括build、test和deploy stages: - build - test - deploy # 定义构建阶段 build: stage: build image: node:latest cache: paths: - node_modules/ before_script: - npm install script: - npm run build # 定义测试阶段 test: stage: test image: node:latest cache: paths: - node_modules/ before_script: - npm install script: - npm run test # 定义部署阶段 deploy: stage: deploy image: node:latest before_script: - yum install -y nginx script: - rm -rf /usr/share/nginx/html/* - cp -r dist/* /usr/share/nginx/html/ - systemctl restart nginx 但这里有几个问题：