来！手把手教你创建自己的代码仓库

前言： 最近想把项目中感觉很常用的一些组件或者工具函数集中在自己的仓库中，方便以后使用起来不用再一个一个从 A 仓库找到 A 组件，然后从 B 仓库找到 B 组件...

就当我准备开始的时候，突然转念一想我应该记录下这个过程。

一方面是在公司项目中从我们几个开始敲代码之前，基本上所有前置任务比如创建仓库，安装包管理工具，Eslint 规则...等都是我们 leader 提前帮我们创建好的。我们开始敲代码只需要到代码仓库复制地址，然后到命令行 git clone 就完事了。所以我也想通过这个过程梳理一下自己从 0 配置一个代码仓库的思路。

另一方面如果能帮助到他人的话，也是本篇文章的幸事，何乐而不为呢？🎁

一. 使用 Vite 命令行工具

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

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

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

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

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

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

这段话的大致意思就是，脚手架的初始化已经帮你做好了。我们这里先不执行 pnpm install 命令，我们直接打开这个文件看看到底是什么样子。

如果你执行的没问题，你现在的代码仓库应该是这个样子。

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

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

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

让我们在终端下执行 pnpm install

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

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

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

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

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

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

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

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

二. 使用 Prettier 约束代码规范

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

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

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

也正因为了如果每开启一个项目我们都需要去完成这些毫无意义的 “重复工作”，脚手架才应运而生。它帮你快速搭建了一个项目所需的基本内容，可以让你快速投入到代码的编写当中，为你节省了大量的时间才是它的意义。

首先我们打开 .prettierrc.json ，在这里我们可以设定项目格式化的一些规则，这是我们项目里常用的配置。主要限制了 1.每一行换行的宽度 2.省略分号对象的最后一个属性自动加逗号。

（tips:这里不过多介绍其它配置，读者可以自行查阅 prettier 的文档。）

然后我们打开 .prettierignore 文件，在这个文件里你可以设置你不想格式化的文件，使用的语法规则和 .gitignore 一模一样。

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

因为 prettier 默认是设置好忽略 node_modules 文件的，而我又不需要额外忽略其它文件，所以我这里就不需要填写这个文件内容。

然后你可以试一试，把对象后面的逗号删除，然后把分号加上，我是设置了保存自动格式化的功能，所以当我保存文件的时候，它会自动帮我格式化掉。如果你看到了效果，那么证明你 prettier 已经成功配置好了。

三.使用 UnoCSS

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

我们的项目里很少使用到 <Style> 标签了，因为起类名简直是一种折磨，所以我们统一采用了一种将样式写进 class 属性里的写法，初次使用这张写法也许会很不习惯。但是一旦你上手以后，就再也回不去了，不用起类名简直不要太爽!!!🍦。

我们直接到 UnoCss GitHub，去查阅相应的使用方法。在 ReadMe.md 可以找到 Installation 选项

由于我们是使用 Vite 生成的项目，所以我们点第一个 Vite 选项。

打开后我们可以看到如下的命令，直接命令行输入 pnpm i unocss 即可。

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

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

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

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

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

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