---

theme: mk-cute

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

我不允许还有人不会《创建个人代码仓库！》

前言： 最近想把项目中感觉很常用的一些组件或者工具函数集中在自己的仓库中，方便以后使用起来不用再一个一个从 A 仓库找到 A 组件，然后从 B 仓库找到 B 组件… 就当我准备开始的时候，突然转念一想我应该记录下这个过程。 一方面是在公司项目中从我们几个开始敲代码之前，基本上所有前置任务比如创建仓库，安装包管理工具，Eslint 规则…等都是我们 leader 提前帮我们创建好的。我们开始敲代码只需要到代码仓库复制地址，然后到命令行 git clone 就完事了。所以我也想通过这个过程梳理一下自己从 0 配置一个代码仓库的思路。 另一方面如果能帮助到他人的话，也是本篇文章的幸事，何乐而不为呢？?

---

一. 使用 Vite 命令行工具

1. 我们从 Vite 官方可以得知，我们可以通过 npm 或 yarn 或者 pnpm 三个包管理工具去初始化仓库。

   

   我们项目是使用 pnpm 的，所以我选择的是 pnpm。
2. 用终端打开一个你想放这个代码仓库的文件夹，然后输入下面这段代码。

pnpm create vite my-vue-app --template vue

特别需要注意一点，这里的 my-vue-app 是让你自定义这个文件名的，并不是你一定就需要叫 my-vue-app 这个名字，千万不要官方给你提供什么，你就写什么。一定一定要自己去动脑筋思考思考，学习这件事最忌讳死脑筋。

3. 接下来会让你确认一遍包名，注意：这里不是让再次确认文件夹的意思，这里其实对应了之后你 package.json 的 name 字段，这个后面会讲到。

   

4. 按下回车之后，我们会看到这样的提示。

   

   

   这段话的大致意思就是，脚手架的初始化已经帮你做好了。我们这里先不执行 pnpm install 命令，我们直接打开这个文件看看到底是什么样子。
5. 如果你执行的没问题，你现在的代码仓库应该是这个样子。

   

6. 我们打开 package.json文件，看见这个 name 字段了吗？它其实就对应了刚刚第二次让你确认的 package name。

   

7. 假设这里你迫不及待的执行了 pnpm run dev ，你会看到下面的报错。

   

   原因非常简单，因为你回头看一下你的文件结构，你现在并没有 node_modules 文件，等于说 package.json 文件里的依赖都还是一堆字符串而已，并没有发挥它们的作用。

   

8. 让我们在终端下执行 pnpm install

   

   然后你的根目录下应该会多出一个 node_modules 文件。

   

   此时你再执行 pnpm run dev 即可。

   

   之后你应该会看到这提示，说明你的项目已经在 5173 这个端口上跑起来了。

   

   我们切到浏览器看一下，端口号果然是 5173。

   

9. 这里假如你说十分讨厌 5173 这个数字，我看见就心烦，特别想换一个怎么办？其实非常简单，你只需要将 pnpm run dev 这个命令替换成 pnpm run dev --port 4399 即可。--port 后面跟你相跟的数字即可。

   

   然后我想你会看到这个页面，可以看到我们的项目已经跑在指定的端口上了。

   

10. 这里我需要额外再讲一下，如果你下次再次执行 pnpm run dev 你会发现你依旧跑在了 5173 这个默认的端口上。如果你想永久更改端口，其实非常非常简单。你只需要在package.json 文件修改下面的这一行配置即可。

    

    然后你就会发现你这个项目之后都会跑在你指定的这个端口上去。

    

二. 使用 Prettier 约束代码规范

1. 从 Prettier 官方直接复制这条命令在命令行敲出即可。

   

2. 然后你只需要在你项目的根目录下，手动创建两个文件。一个 .prettierrc.json，一个 .prettierignore 文件。是的你没有听错，你真的是简简单单敲两下就可以完成 prettier 的配置。

   

3. 真的，你千万不要觉得这些文件的由来是多么神奇的事情，这些文件虽然是脚手架帮你自动生成的，但是你把它们删除了，重新创建效果是一模一样的。

   

4. 也正因为了如果每开启一个项目我们都需要去完成这些毫无意义的 “重复工作”，脚手架才应运而生。它帮你快速搭建了一个项目所需的基本内容，可以让你快速投入到代码的编写当中，为你节省了大量的时间才是它的意义。
5. 首先我们打开 .prettierrc.json ，在这里我们可以设定项目格式化的一些规则，这是我们项目里常用的配置。主要限制了 1.每一行换行的宽度 2.省略分号 对象的最后一个属性自动加逗号。

   

   （tips:这里不过多介绍其它配置，读者可以自行查阅 prettier 的文档。）
6. 然后我们打开 .prettierignore 文件，在这个文件里你可以设置你不想格式化的文件，使用的语法规则和 .gitignore 一模一样。

   

   你可以参考同目录下已经生成好的这个 gitignore 文件。

   

   因为 prettier 默认是设置好忽略 node_modules 文件的，而我又不需要额外忽略其它文件，所以我这里就不需要填写这个文件内容。
7. 然后你可以试一试，把对象后面的逗号删除，然后把分号加上，我是设置了保存自动格式化的功能，所以当我保存文件的时候，它会自动帮我格式化掉。如果你看到了效果，那么证明你 prettier 已经成功配置好了。

三.使用 UnoCSS

1. 看过我之前文章的读者一定对我这种写法不陌生。

   

   我们的项目里很少使用到 <Style> 标签了，因为起类名简直是一种折磨，所以我们统一采用了一种将样式写进 class 属性里的写法，初次使用这张写法也许会很不习惯。但是一旦你上手以后，就再也回不去了，不用起类名简直不要太爽!!!?。
2. 我们直接到 UnoCss GitHub，去查阅相应的使用方法。在 ReadMe.md 可以找到 Installation 选项

   

   由于我们是使用 Vite 生成的项目，所以我们点第一个 Vite 选项。
3. 打开后我们可以看到如下的命令，直接命令行输入 pnpm i unocss 即可。

   

4. 等安装好后，我们就去 vite.config 文件下引入 Unocss，并添加到 Vite 的 Plugins 选项当中。

   

5. 然后在去 main.js 文件下引入。

   

6. 最后一步，你可以选择一款你喜欢的预设来启动你的 UnoCss。

   

   这里是什么意思呢？在这里你需要知道，UnoCSS本身不提供任何方案，目前有很多类似于在元素标签 class 属性里写样式的方案，如我们项目里使用的 tailwindCss等 UnoCSS 不知道你喜欢哪一种风格所以让你进行了一个选择。这里该怎么解释呢？等你自己用的时间长了以后，你就会自己领会，在这里我只需要带你入门，我想你暂时这样理解我想应该没什么问题。

之前的那些解决方案都太重了，打包后的体检会很大。但是 Uno 在它们的基础上帮你做了一层优化，打包起来体检更轻，编译更快速。

7. 设置也非常简单，点进去这里。

   

   你会看到

   

   执行 pnpm i -D @unocss/preset-uno
8. 安装完以后打开你的 vite.config.js 文件，引入 presetUno 然后在下面的 Unocss 里完成相关设置即可。

   

9. 然后我们随便创建一个简单的样式看一下生效了没。

   

   上面的写法是，这个 <div> 标签会被设置 100px 的宽高，然后 red 的背景颜色，最后是 blue 的字体颜色

   

   。 可以看到我们的页面成功展示出了我们设置的样式，说明我们已经完成了配置。可以舒舒服服的写代码了。

三. 设置路径别名

1. 最后打开我们的 App.vue 文件。

   

   这种引入的方式太不优雅了，我想你也见过别人设置 @ 来作为 src ，比如下面。

   

   其实这个是很简单的一个设置，下面我来教你如何设置。
2. 我们打开 vite.config.js 文件。

   

   你如果懂一点 node.js 的话，可能会知道 path 身上的一些方法，也自认懂这些写法。

   

3. 然后我们去 App.vue 去尝试一下。

   

   然后看一网页效果：

   

   没报错，看来我们的思路是没问题的。
4. 但是不要把这个当成很什么高深莫测的写法，你这样写是当你想引入 src 目录下的文件时，你 import xxx from '@/xxxx' 就可以了 。

   

5. 你也可以这样，引入 src/components 目录下的文件时，直接 from "#/xxx.vue" 来引入。

   

   如下所示:

   

四. 将代码托管 GitHub

1. 首先我们选择使用 git 来托管，就要在项目里先使用 git init 来将 git 引入到我们的这个仓库里。

   

2. 接下来打开 github，点击创建仓库。

   

3. 填写你的仓库名字之类的，填写完成以后点击下方的 Create repository。

   

4. 然后会来到这个页面，我们复制下面这行代码。

   

5. 终端执行这行代码，将我们本地仓库和 github 远程仓库联系起来。

   

6. 执行完毕，使用 git remote -v 可以看到你本地仓库的上游已经变为刚刚我们远程仓库的地址了。

   

7. 最后执行 git push --set-upstream origin master ，这样就把你当起的分支，也就是把本地的 master 分支和远程仓库的 master 关联起来。

   

8. 后面的 git add,git commit,git push 就不过多重复了。当你提交了你的代码后，你的代码仓库页面就会变成这样样子。

   

9. 如果这时候你想切换分支。你可以执行 git checkout -b dev 。

   

10. 当你 git push 的时候，你会发现和刚刚一模一样的命令提示。

    

    假如你回头看一下你的 github 仓库，你会发现其实远程并没有一个叫 dev 的仓库，那你 push 的时候，git 其实不知道你想往哪里推。 然后你执行相同的命令 git push --set-upstream origin dev 即可。

    

11. 回过头看一下远程仓库，果然多了一个 dev 分支。

    

    至此你已经完成了的个人仓库代码托管和前置工作。

结语

在实际项目中初始化代码仓库大概流程就是这些，希望你能学到一些知识。? ------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。