共计 3815 个字符，预计需要花费 10 分钟才能阅读完成。
前言： 最近想把我的项目中感觉很罕用的一些 组件 或者 工具函数 集中在本人的仓库中，不便当前应用起来不必再一个一个从 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 在它们的根底上帮你做了一层优化，打包起来体检更轻，编译更疾速。
- 设置也非常简单，点进去这里。
你会看到
执行
pnpm i -D @unocss/preset-uno - 装置完当前关上你的
vite.config.js文件，引入presetUno而后在上面的Unocss里实现相干设置即可。 - 而后咱们轻易创立一个简略的款式看一下失效了没。
下面的写法是，这个
<div>标签会被设置100px的宽高，而后red的背景色彩，最初是blue的字体色彩
。
能够看到咱们的页面胜利展现出了咱们设置的款式，阐明咱们曾经实现了配置。能够舒舒服服的写代码了。
三. 设置门路别名
- 最初关上咱们的
App.vue文件。这种引入的形式太不优雅了，我想你也见过他人设置
@来作为src，比方上面。其实这个是很简略的一个设置，上面我来教你如何设置。
- 咱们关上
vite.config.js文件。你如果懂一点
node.js的话，可能会晓得path身上的一些办法，也自认懂这些写法。 - 而后咱们去
App.vue去尝试一下。而后看一网页成果：
没报错，看来咱们的思路是没问题的。
- 然而不要把这个当成很什么高深莫测的写法，你这样写是当你想引入
src目录下的文件时，你import xxx from '@/xxxx'就能够了。 - 你也能够这样，引入
src/components目录下的文件时，间接from "#/xxx.vue"来引入。如下所示:
四. 将代码托管 GitHub
- 首先咱们抉择应用
git来托管，就要在我的项目里先应用git init来将 git 引入到咱们的这个仓库里。 - 接下来关上 github，点击创立仓库。
- 填写你的仓库名字之类的，填写实现当前点击下方的
Create repository。 - 而后会来到这个页面，咱们复制上面这行代码。
- 终端执行这行代码，将咱们本地仓库和 github 近程仓库分割起来。
- 执行结束，应用
git remote -v能够看到你本地仓库的上游曾经变为刚刚咱们近程仓库的地址了。 - 最初执行
git push --set-upstream origin master，这样就把你当起的分支，也就是把本地的master分支和近程仓库的master关联起来。 - 前面的
git add,git commit,git push就不过多反复了。当你提交了你的代码后，你的代码仓库页面就会变成这样样子。 - 如果这时候你想切换分支。你能够执行
git checkout -b dev。 - 当你
git push的时候，你会发现和刚刚截然不同的命令提醒。如果你回头看一下你的 github 仓库，你会发现其实近程并没有一个叫
dev的仓库，那你push的时候，git其实不晓得你想往哪里推。
而后你执行雷同的命令git push --set-upstream origin dev即可。 - 回过头看一下近程仓库，果然多了一个
dev分支。至此你曾经实现了的集体仓库代码托管和前置工作。
结语
在理论我的项目中初始化代码仓库大略流程就是这些，心愿你能学到一些常识。🎁
