1.新款vue-cli之create-vue源码阅读总结
2.Ant Design of Vue pro 安装与配置
3.Vue项目的源码部署

新款vue-cli之create-vue源码阅读总结

       新款Vue CLI之create-vue源码阅读总结

       create-vue，作为Vue项目的源码简便启动工具，源码简洁明了。源码本文将对其核心知识点进行整理。源码

       使用方式：create-vue通过运行outfile.cjs文件，源码此文件由package.json中的源码预测后期行情源码bin配置指定。

       在package.json设置type: 'module'，源码表示如果js文件采用ES模块格式编写，源码无需转换为outfile.cjs。源码

       模板增量覆盖命令行参数解析：简化版本的源码vue-cli commander，预设默认参数，源码如使用预设可跳过问题询问，源码自动拉取对应模板。源码班级主页源码

       问题答案统计：prompts收集问题答案，源码输出成对象形式，源码与vue-cli中的inquirer功能类似。

       颜色渐变：utils\banner.js中实现终端输出的美丽颜色渐变功能。

       文字颜色格式化：kolorist库，将颜色注入输入/输出，相当于vue-cli中的chalk。

       pinia：更简洁的状态管理方案。

       vitest：详细信息见相关文章。

       git submodule：常规操作，playground文件夹即为一个submodule。

       js语法书写shell：以js形式编写shell脚本，付费通 源码例如scripts\snapshot.mjs需先执行npm run build。

       pnpm：自行搜索了解。

       husky7：git hooks相关。

       npm-run-all：自行搜索了解。

       cypress：自行搜索了解。

Ant Design of Vue pro 安装与配置

       欢迎来到Ant Design of Vue pro的安装与配置教程！今天，我们将一起探索如何快速设置并使用这套专为Vue框架打造的中后台管理系统前端集成组件库。

       让我们从基础开始，Ant Design of Vue pro为开发者提供了一套美观且规范化的UI组件库，助力快速构建专业级的后台界面。但要注意，开心网站源码初期Ant Design仅提供React版本，对Vue开发者来说，这可能是一个挑战。然而，随着Vue的日益流行，Ant Design也适时推出了Vue版本，即Ant Design of Vue，为Vue开发者提供了便捷的解决方案。

       1. 下载与安装

       首先，我们需要从Git或Gitee获取Ant Design of Vue pro的源代码。如果网络不佳，使用Gitee是酷好360源码一个不错的选择。解压下载的文件后，我们会在目录中找到项目结构。

       接下步，使用yarn或npm安装项目依赖。yarn是一个强大的包管理工具，具备离线下载和性能优化功能，而npm是Node.js的标准包管理器。你可以通过全局安装yarn并运行相关命令来完成依赖安装。

       如果在从Git仓库克隆项目时遇到问题，只需确保创建本地仓库并重新提交代码，以解决可能的冲突。

       项目安装完成后，访问运行地址（例如：:Xin-hai/haiqing-1.git。这个仓库称为源代码仓库，其中dist目录默认不会上传。根据Vue CLI部署指南，需要进行本地预览，确保yarn build打包后的dist目录正确无误。在终端执行官方推荐的命令，启动HTTP服务器访问dist目录。

       由于我使用yarn进行包管理，因此使用yarn命令进行安装。在新的预览地址中，我比较了文件，发现打包后的css和js文件体积比yarn serve得到未打包的体积更小。检查完dist目录打包无误后，可以关闭预览。

       二、GitHub Pages手动推送更新

       新建一个远程仓库地址用于存放dist目录的相关代码，这个仓库仅用于网页展示，如git@github.com:Xin-hai/haiqing-1-website.git。此仓库最好与源代码仓库名称相似，例如在后面加上-website。

       在vue.config.js中设置正确的publicPath。找到vue.config.js并添加如下代码，将'/my-project/'修改为新建的仓库地址名'/haiqing-1-website/'。

       在项目目录上创建deploy.sh并按照官方写入相关代码。我使用的是yarn，进行了一点小的修改。主要修改的是git push -f git@github.com:Xin-hai/haiqing-1-website.git master:gh-pages这句代码，其中的haiqing-1-website是前面新建的存放dist的仓库，也是用于网页展示的仓库。

       在终端运行sh deploy.sh即可自动部署。代码会上传到haiqing-1-website仓库的gh-pages分支上，此分支会自动开启GitHub的pages功能，稍等片刻就能看到网页链接。注意，源代码仓库不会自动更新，需要自己git push相关代码。

       三、码云部署

       为了优化访问速度，我使用了码云gitee。同样，在码云上新建好仓库后，复制ssh地址，将deploy.sh中的git push -f git@github.com:/.github.io.git master修改为码云的。

       在gitee的服务选项中查看Gitee pages功能。

       ------------------------------------------..补充

       在经历一个星期的实名认证之后，我的码云终于可以使用Gitee page功能了。在推送时，除了修改deploy.sh为如下，还需要将vue.config.js中的仓库地址改为码云中的远程仓库地址如下。

       注意，gitee需要手动更新，每次git push后需要手动更新才能看到效果。

       最后，是我最近做的海青记账的GitHub源代码仓库和Gitee源代码仓库，欢迎大家体验和提出建议。