如何从0开始搭建1个前端项目?第一章(初始化项目篇 - `GtiHub`创建项目 & `README LICENSE .gitignore` & `Npm`)

375 阅读4分钟

第一章:初始化项目篇(gtihub创建项目 & README LICENSE .gitignore & Npm篇)

favicon.svg 所有的源码都在这里(如果觉得对你有帮助,求star支持,感谢!🙏)

1. 创建项目

  • 首先我们需要创建一个项目,那我们首先需要使用到Git(需要安装)和GitHub(需要注册)或者其它的平台
  • 先打开GitHub点击New跳转到如下图所示完成创建项目相关的填写,其实在这里我们只需要填写一个可用的项目名称,其它的内容就用默认值或者等后面再填写就可以了,然后再点击Create repository就可以成功的创建项目啦

Dingtalk_20220529170732.jpg

  • 创建成功之后,先拷贝我们的项目地址,然后在自己的电脑上找一个合适的位置打开终端执行git clone https://github.com/XXX/Demo.git,等待成功之后我们就可以在本地看到我们创建的项目啦,不过现在还是一个空的项目
  • 最后我们还需要选一个适合自己的idea或者编辑器打开刚刚的项目,我这里使用的是VScode,到此为止,我们就算成功的创建了一个项目啦,接下来就是往这个项目里面添加内容了

2. 一个项目中必须要有的3个文件(README LICENSE .gitignore

这3个文件其实在一个项目中是非常重要的,不过它们也非常的简单。下面有这3个文件具体的说明和简单的模板,我们可以先不做过度的深入了解,先大概知道一下这3个文件是干什么的,然后把下面的模板拷贝到自己的项目里面去,后面再按需改动

  • README- 在这里您可以为您的项目编写详细的描述 Learn more
# 从0开始搭建1个前端项目
  • LICENSE- 许可证告诉其他人他们可以使用您的代码做什么和不能做什么 Learn more
MIT License

Copyright (c) [2022] [name]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
  • .gitignore- 从模板列表中选择不跟踪的文件 Learn more
*.log
node_modules/
dist/

到此为止,我们刚刚创建的空项目就算添加了第一部分的内容啦,我们可以在项目的根目录下打开终端,然后按照顺序执行如下命令来完成我们项目的第一次提交。而且后面我们每完成一部分的内容也建议都提交到远程仓库,方便后面有迹可循。(有关Git更多的操作看这里,其实先学会下面三个命令就可以完成大部分的操作了)

git add.
git commit -m 'init'
git push

3. Npm - Node包管理器

node和npm都是需要先安装的,node更是前端项目的一个基本运行环境。且安装Node会自动安装Npm,我们可以通过在终端执行node -v先检查一下自己的电脑是否安装了node,如果没有的话我们需要先安装一下,安装的过程其实非常简单,先点开官网按照提示下载完成后,然后点击安装再按照提示点击下一步就可以按照成功了

  • 安装好环境后,首先我们需要初始化npm,在终端先执行npm init生成package.json,在这个过程中,会要求我们输入一些基本信息,我们可以按需输入或者一路按回车使用默认值都可以,我这里用的就都是默认值,后面再按需修改
{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/XXX/Demo.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/XXX/Demo/issues"
  },
  "homepage": "https://github.com/XXX/Demo#readme"
}
  • 然后再执行npm install生成package-lock.json,这条命令的意思是下载当前项目中所有需要的依赖包(因为我们现在的项目里面还没有使用到任何的依赖,所以这里其实也可以等后面我们真正需要下载某些依赖的时候再执行,我在这里先执行的原因是想让同学们看到这个文件的一个基本结构,因为以后它会很复杂)
{
  "name": "demo",
  "version": "1.0.0",
  "lockfileVersion": 1
}

favicon.svg 所有的源码都在这里(如果觉得对你有帮助,求star支持,感谢!🙏)

下一篇:第二章《统一代码风格篇》.vscode/setting.json&EditorConfig&ESLint&Stylelint&Prettier&husky&lint-staged&commitlint