前言： 最近想把项目中感觉很常用的一些组件或者工具函数集中在自己的仓库中，方便以后使用起来不用再一个一个从 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
- 看过我之前文章的读者一定对我这种写法不陌生。
我们的项目里很少使用到