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,预设默认参数,源码如使用预设可跳过问题询问,源码自动拉取对应模板。源码交友soul源码
问题答案统计:prompts收集问题答案,源码输出成对象形式,源码与vue-cli中的inquirer功能类似。
颜色渐变:utils\banner.js中实现终端输出的美丽颜色渐变功能。
文字颜色格式化:kolorist库,将颜色注入输入/输出,相当于vue-cli中的chalk。
pinia:更简洁的状态管理方案。
vitest:详细信息见相关文章。
git submodule:常规操作,playground文件夹即为一个submodule。
js语法书写shell:以js形式编写shell脚本,promall系统源码例如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是收割 指标源码一个不错的选择。解压下载的文件后,我们会在目录中找到项目结构。
接下步,使用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源代码仓库,欢迎大家体验和提出建议。