个人建站前端篇（一）项目准备初始化以及远程仓库连接

云风的知识库
云风网前端重构，采用vue3.0+vite + antd框架，实现前后端分离，实现网站的SEO优化，实现网站的性能优化

vite创建vue项目以及前期准备

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

既然采用vite，那么需要安装vite的依赖，执行以下命令：

npm create vite@latest webSiteVue -- --template vue
或者
npm create vite@latest

选择vue + ts组合，这个根据个人需求

安装依赖，项目运行

npm install
npm run dev

新建远程仓库并建立连接

在gitee上创建一个新的仓库，命名为website

打开git bash，进入webSiteVue文件夹，执行以下命令

git init
git remote add origin https://gitee.com/niech_project/website.git
git pull origin master

这样就建立了远程仓库连接

这里想要快速梳理项目结构，可以安装mddir实现

npm install mddir -g 

项目根目录下执行以下命令

PS D:\webPro\vite\webSiteVue> mddir

这里项目根目录会生成directory.md文件，里面会列出项目的目录结构，方便我们查看项目结构。

修改readme.md文件，添加项目介绍

# website

#### 介绍
vue版本的云风网

#### 安装教程

1. npm create vite@latest

#### 使用说明

1. npm install
2. npm run dev
3. npm run build

#### 项目架构
1. npm install mddir -g
2. mddir
3. 生成directoryList.md文件，查看目录结构
|-- 项目架构
    |-- .gitignore
    |-- index.html
    |-- LICENSE
    |-- package-lock.json
    |-- package.json
    |-- README.en.md
    |-- README.md
    |-- tsconfig.json
    |-- tsconfig.node.json
    |-- vite.config.ts
    |-- .vscode
    |   |-- extensions.json
    |-- public
    |   |-- vite.svg
    |-- src
        |-- App.vue
        |-- main.ts
        |-- style.css
        |-- vite-env.d.ts
        |-- assets
        |   |-- vue.svg
        |-- components
            |-- HelloWorld.vue

新建dev分支，提交代码到gitee仓库，执行以下命令，提交代码到gitee仓库，并推送到远程仓库。

git checkout -b dev
git add .
git commit -m "init project"
git push origin dev

准备工作就绪，可以进行代码编写开发了