第三章【前端】项目配置（3.1-3.2）——项目初始化

本文链接：https://blog.csdn.net/qdbest/article/details/140916460

第三章【前端】项目配置

3.1 项目初始化

3.1.1 新建项目

安装 Vue - Official 插件

运行命令

npm create vite@latest

如果在 Windows 上直接通过 Git Bash 启动这个命令，交互提示符并不工作，必须通过 winpty npm.cmd create vite@latest 启动这个命令。而在 Visual Studio Code 终端下运行则没问题。

当前的package.json文件如下：

{
  "name": "yumi-admin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.35"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "typescript": "^5.5.3",
    "vite": "^5.4.0",
    "vue-tsc": "^2.0.29"
  }
}

第三行 "private": true 表明项目默认启用 ES6 模式，参阅阮一峰的Node.js 如何处理 ES6 模块

配置 .nmvrc （参考2.1）
```
echo "v22.9.0" > .nvmrc
```
使用 .nvmrc 文件管理项目中的 Node 版本有以下好处：
- 保证多人开发环境的一致性
  
  在多人协作的开发环境中，每个人可能安装的 Node 版本都不一样。使用 .nvmrc 文件可以保证每个人都使用同样的 Node 版本，这样可以避免因为 Node 版本不一致导致的问题。
- 支持多个项目并存使用不同的 Node 版本
  
  在一个开发人员的计算机上，可能存在多个应用程序，每个应用都需要使用不同的 Node 版本。使用 .nvmrc 文件可以方便地管理，并使得不同的应用程序共存于同一个计算机中。
- 简单方便
  
  使用 .nvmrc 文件非常方便，只需要将它放置在项目根目录下，运行 nvm use 即可。也可以安装插件 vsc-nvm，终端启动时自动运行 nvm use 切换 Node 版本。
支持模糊版本号，如 22，会切换到已安装的大版本 22 的最后一个版本。
安装依赖
“5 packages are looking for funding” 并不是错误提示，也不会影响项目的正常运行。这是提醒我们，有一些软件包正在寻求资金支持。

这个提示的目的是让我们意识到，许多开源项目是由志愿者开发的，他们投入了大量时间和精力，我们可以选择捐款来支持他们。

如果我们不想在每次安装时看到这个提示，可以通过以下命令关闭：
```
npm config set fund false --location=global
```
如果我们只想在该项目中关闭这个提示，可以在该项目目录中运行以下命令：
```
npm config set fund false
```
这样，我们就不会再收到有关捐款支持的提示了，但是请记住，支持开源项目的开发者们是非常重要的。
运行程序

3.1.2 删除和修改项目文件

删除 public 目录下的所有文件
复制 corn.svg 到 public 目录下（corn.svg 为自定义图标，自行定义或从源码下载）
删除 src/assets 目录下的所有文件
删除 src/components 目录下的所有文件

若 tsconfig.app.json 报错，重启 VsCode 即可。

修改 App.vue，只保留三大顶级元素。

<script setup lang="ts"></script>

<template>
  <div>hello</div>
</template>

<style scoped></style>

删除 src/style.css

删除 main.ts 文件的 import './style.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

修改图标、标题

修改图标为：「 corn.svg」，修改 <title> 标签体内容：「玉米-后台管理系统」

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- ========== -->
    <link rel="icon" type="image/svg+xml" href="/corn.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>玉米-后台管理系统</title>
    <!-- ---------- -->
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

修改后的效果

3.2 代码上传 `Gitee` 仓库

初始化仓库
```
git init
```
新建远程仓库

Git 全局设置

git config --global user.name "yumi"
git config --global user.email "123456@qq.com"

生成公钥
```
ssh-keygen
```
查看公钥
```
cat ~/.ssh/id_ed25519.pub
```
复制公钥

设置 Git 不跟踪按需引入插件生成的文件

按需引入后边章节介绍。

# .gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# 按需引入插件生成的文件
# ++++++++++
src/types/auto-imports.d.ts
src/types/components.d.ts
.eslintrc-auto-import.json
# ----------

如果要忽略的文件已被 Git 跟踪，执行以下操作：

# 将指定的文件从 git 版本控制中移除
git rm --cached <文件路径1> <文件路径2> ...
# 将 .gitignore 添加到暂存库中
git add .gitignore
# 提交
git commit -m "update .gitignore"

提交
```
git add .
git commit -m "init"
```
打标签
```
git tag -a S4.1 -m "Section4.1"
```

关联远程仓库

git remote add origin git@gitee.com:yucn/yumi-admin.git

推送到远程仓库

# 推送最新提交
git push origin master
# 推送标签
git push origin S4.1

以后每节都会上传源码及标签，不再赘述。

第三章 【前端】项目配置（3.1-3.2）——项目初始化

第三章 【前端】项目配置