項(xiàng)目初始化

本片文章主要記錄項(xiàng)目的環(huán)境，項(xiàng)目搭建。
在開始本次學(xué)習(xí)中，鑒于你有前端三件套和vue的知識(shí)基礎(chǔ)。
文檔創(chuàng)建于2023年5月20日，大家都去過情人節(jié)了~我在肝代碼！

環(huán)境的搭建

node版本使用18.16.0。
目前（2023.05.20）的穩(wěn)定版本，這里推薦使用nvm來管理node的版本。Nvm使用教程（很簡(jiǎn)單）。
版本管理主要原因是公司有老項(xiàng)目，使用高版本node無法運(yùn)行，需要進(jìn)行切換。

安裝node版本

安裝node版本使用nvm工具，具體查看上面的教程安裝nvm（內(nèi)容可能有點(diǎn)老22年的文檔，可自行百度）。
安裝好nvm后使用nvm install 18.16.0 安裝我們的node。
安裝好后，按照提示 nvm use 18.16.0使用該版本。

環(huán)境校驗(yàn)

使用node -v 或者 npm -v 校驗(yàn)，顯示版本即可。

創(chuàng)建項(xiàng)目

按照vite官方網(wǎng)站教程，創(chuàng)建一個(gè)vue+ts的項(xiàng)目。

如果你不想使用typeScript，那么可以直接使用官網(wǎng)的命令使用vue模板。
本次創(chuàng)建需要使用typeScript，我們使用自定模板。
找一個(gè)存放項(xiàng)目的目錄，打開powerShell或者cdm（在項(xiàng)目按住shift，鼠標(biāo)右鍵選擇“在此處打開powerShell”），運(yùn)行這串代碼npm init vite@latest web-blog。

選擇Vue模板

選擇typeScript

按照命令提示 ，我們cd到創(chuàng)建好的項(xiàng)目根目錄，安裝依賴，使用code . 命令打開我們的項(xiàng)目。

使用vite這個(gè)打包工具，我們只要打開了項(xiàng)目，他就會(huì)幫我們?nèi)?zhí)行npm run dev幫我們啟動(dòng)項(xiàng)目。

訪問http://localhost:4000/就可以看到我們啟動(dòng)的項(xiàng)目了。

項(xiàng)目倉庫初始化及項(xiàng)目開源。

我們來學(xué)習(xí)一下GIT的常用命令操作吧！

在碼云Gitee上面創(chuàng)建倉庫。

在官網(wǎng)新建倉庫

新建倉庫填寫內(nèi)容如下，隨意即可。

點(diǎn)擊創(chuàng)建，創(chuàng)建之后跳轉(zhuǎn)到如下頁面。

使用vscode打開項(xiàng)目后，使用命令行工具（不知道怎么打開可以使用快捷鍵 ctrl+shfit+~打開

本地倉庫上傳到遠(yuǎn)程gitee倉庫

接下來的操作，你需要安裝git。
使用 git init 初始化我們本地的代碼倉庫。

使用 git remote add origin?git@gitee.com:tjustb185150735/web_blog.git 關(guān)聯(lián)我們的遠(yuǎn)程代碼倉庫。

關(guān)聯(lián)完成后我們先提交代碼到本地倉庫。
使用git add . 暫存所有更改的代碼文件。

再使用git commit -m '首次提交’ 把代碼提交到本地倉庫

再使用git push origin master 提交到遠(yuǎn)程倉庫gitee上面。
如果你沒有設(shè)置ssh或者賬號(hào)密碼，上傳需要輸入gitee的賬號(hào)密碼。
提交后再看到遠(yuǎn)程倉庫就提交好了。

開源,打包，部署

開源

到項(xiàng)目設(shè)置中開源項(xiàng)目，完成下圖操作，點(diǎn)擊保存即可。

打包及配置

首先進(jìn)行項(xiàng)目的打包。
在gitee上面部署，我們的根目錄是你的gitee地址+項(xiàng)目名稱
比如我們的項(xiàng)目本地運(yùn)行的http://localhost:4000/是根目錄，
但是部署到gitee的根目錄則是http://tjustb185150735.gitee.io/web-blog/是根目錄
我們需要把我們本地運(yùn)行的地址改成http://localhost:4000/web-blog/

我們?cè)趍aster分支上，首先切一個(gè)分支noline，專門用來上線。

使用git checkout -b online切換到上線分支，

1. 修改vite.config.ts
   在原來的基礎(chǔ)之上添加了 base:‘/web_blog’,也就是我們代碼倉庫的名字

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base:'/web_blog',
  plugins: [vue()],
})

2. 修改提交內(nèi)容包含打包好的文件
   .gitignore文件中把dist刪掉或者注釋掉，才能上傳dist文件（打包好的文件）到遠(yuǎn)程倉庫

3. 配置好之后使用 npm run build 進(jìn)行打包

打包后可以使用npm run preview進(jìn)行預(yù)覽

4. 上傳代碼
   執(zhí)行上傳代碼
   git add . 暫存代碼
   git commit -m '上線分支部署初始化' 提交代碼到本地分支
   git push origin online 提交代碼到遠(yuǎn)程分支gitee online分支

上傳完成后gitee就有了我們的online分支

部署

部署按照下面的圖流程即可。
文章來源地址http://www.zghlxwxcb.cn/news/detail-760920.html

總結(jié)這樣我們就完成了我們項(xiàng)目的初始化以及部署到gitee，下一篇文章我們將講述安裝項(xiàng)目的一些依賴。比如elementPlush,less,sass等。

到了這里，關(guān)于手摸手教你Vite+Vue3項(xiàng)目初始化及開源部署到GItee的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！