组件包plugin-edit

学习并简单记录一个关于前端组件包的vue项目，从创建、关联仓库，到最终npm打包。

• 代码块：记录一些用到的npm与git命令
• 引用块：引用一些我在学习过程中查阅资料里的知识点
• 截图：记录一些输出或是遇到的问题
• 文字：辅助记录，相关的解释与描述

ps. 目前处于记录进行时，不定时更新补充。欢迎补充或指出问题

目录

新建Vue项目

Vue项目文件结构与文件作用

结合git使用

远程仓库权限问题记录

剔除模板中多余代码

---

新建Vue项目

确保安装了最新版本的 Node.js，并且当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

npm create vue@latest

 跟随提示以及项目具体使用情况进行项目命名，配置项目信息等工作。

以上，完成全新vue项目的创建，可以在vscode中打开plugin-edit项目文件夹，进行后续操作。

Vue项目文件结构与文件作用

如果想要了解的更详细，可以阅读vue项目各文件说明

---

结合git使用

此时，已有一个全新的git远程仓库，以及刚刚新建的vue项目。我们需要完成的是两者之间的绑定，以及第一次commit推送。

此处来自参考资料Git基础使用指南-命令详解

        

# 使用init命令进行git的初始化，git将自动进行相关的初始化操作，会在项目中创建隐藏的.git文件夹，里面有相关的配置信息。

git init

        

# 可在初始化时指定默认分支的名称，否则默认一般为`master`
git init -b main
git init --initial-branch=main

        

# 或者先初始化，再指定分支名称
git init
git branch -M main

在终端依次运行以下命令

git init
git branch -M main
git remote add origin <仓库地址>
git add .
git commit -m "新建vue项目"
git push --set-upstream origin main

以上，完成仓库的绑定、第一次提交commit并推送至远程仓库。

由于在远程仓库操作界面建立了新的分支dev用于后续开发代码提交，此时运行以下命令进行分支切换与确认

git pull
git checkout dev
git log

远程仓库权限问题记录

截图倒数第二行红字显示 ! [remote rejected] ，远程拒绝。

此处是我在执行操作过程中遇到的一个问题，远程仓库没有操作权限，此时只需要在远程仓库管理一下相应的权限问题，重新执行”git push origin main“完成远程仓库的推送。

---

剔除模板中多余代码

该步骤剔除新建新建项目中提供的部分模板代码，这些代码在该项目后续开发中没有作用。（不同项目需自行斟酌）

主要移除src/components中.vue文件，app.vue文件中的script、template、style标签内的代码，以及用不上的tsconfig.app.json文件。

此处需要注意的是，tsconfig.app.json文件有两处引用要同步更改，

一为tsconfig.json文件，直接删除处理

二为tsconfig.vitest.json文件，如图

单元测试样例文件，src/components/__tests__/HelloWorld.spec.ts，可以选择整个删除，或者注释掉对HelloWorld.vue文件的相关测试代码。

完成以上模板代码调整后，建议尝试编译一下，检查是否更改有误导致项目报错。可以通过以下命令进行检查：

npm i
# 或
npm install

# 在执行以下命令进行检查之前请确定已经执行过上述命令

npm run dev
npm run build

此时，确认没有问题后，将代码进行一次commit记录

git add . 
git commit -m "剔除模板中多余代码"
git push