前端項目初始化

??????

目錄

1. 安裝 nvm

2. 配置 nvm 并切換到 Node.js 16.15.0

3. 安裝 LightProxy 代理

4. GIT安裝

1. 配置用戶名和郵箱(這些信息將用于您在提交代碼時的標識):

2. 生成SSH密鑰(用于將本地代碼倉庫與遠程存儲庫連接起來):

5. 項目依賴安裝

6.pnpm

使用更短的別名

在 POSIX 系統上添加永久別名

在 Powershell (Windows) 中添加永久別名:

ps:鏡像加速


1. 安裝 nvm

nvm(Node Version Manager)是一個用于管理多個 Node.js 版本的工具。以下是 nvm 的安裝步驟:

Windows

  1. 訪問 nvm-windows GitHub 倉庫。
  2. 下載最新版本的安裝程序(.zip 文件)。
  3. 解壓文件并運行 install.cmd

2. 配置 nvm 并切換到 Node.js 16.15.0

  1. 打開終端。
  2. 使用 nvm 安裝 Node.js 16.15.0:
nvm install 16.15.0
  1. 切換到 Node.js 16.15.0:
nvm use 16.15.0
  1. 驗證安裝是否成功:
node -v
npm -v

你應該會看到 v16.15.0 和相應的 npm 版本號。


3. 安裝 LightProxy 代理

LightProxy 是一個輕量級的 HTTP/HTTPS 代理工具,適用于前端開發調試。

  1. 訪問 LightProxy 官網 或 Release 頁面。
  2. 下載對應操作系統的安裝包(Windows 用戶下載 .exe 文件,macOS 用戶下載 .dmg 文件)。
  3. 按照安裝向導完成安裝。
  4. 啟動 LightProxy,并配置代理設置

#msig-test

# https://api.cline.xxx.com/api https://test.msig.xxx.com/api

#feature-test

# https://api.cline.xxx.com/api https://feature-test.msig.xxx.com/api


4. GIT安裝

一、下載Git安裝包

  1. 訪問Git的官方網站:Git官網下載頁面。
  2. 根據您的操作系統選擇相應的安裝包進行下載。

二、安裝Git

對于Windows用戶:

  1. 雙擊下載好的Git安裝包,開始安裝過程。
  2. 在安裝過程中,建議使用默認設置,點擊“Next”逐步進行。
    • 您可以選擇修改安裝路徑(非中文且沒有空格的路徑)。
    • 在配置組件、菜單、文件默認編輯器、分支初始化名稱等步驟時,通常可以選擇默認選項。
    • 配置SSH可執行文件、數據傳輸使用的lib庫、行尾符號轉換格式、Git Bash的終端模擬器等,也建議使用默認設置。
  1. 安裝完成后,點擊“Finish”按鈕完成安裝。

對于macOS/Linux用戶:

  1. 根據下載的安裝包類型(如 .dmg 文件或 .tar.gz 文件),按照相應的安裝步驟進行安裝。
  2. macOS 用戶通常可以直接打開 .dmg 文件,并將Git拖動到“應用程序”文件夾中。
  3. Linux 用戶可能需要解壓 .tar.gz 文件,并按照Git官方文檔或社區提供的指南進行安裝。

三、驗證Git安裝是否成功

  1. 打開終端(對于Windows用戶,可以右鍵點擊任意目錄,選擇“Git Bash Here”進入Git命令行窗口)。
  2. 輸入命令:git --version,檢查顯示的Git版本號是否正確。

四、Git的基本配置

1. 配置用戶名和郵箱(這些信息將用于您在提交代碼時的標識):

    • 輸入命令:git config --global user.name "Your Name",將"Your Name"替換為您的用戶名。
    • 輸入命令:git config --global user.email "yourname@example.com",將"yourname@example.com"替換為您的電子郵件地址。

2. 生成SSH密鑰(用于將本地代碼倉庫與遠程存儲庫連接起來):

    • 輸入命令:ssh-keygen -t rsa -b 4096 -C "your_email@example.com",將"your_email@example.com"替換為您的電子郵件地址。
    • 生成成功后,您可以在用戶目錄下的.ssh文件夾中找到公鑰(id_rsa.pub文件)和私鑰(id_rsa文件)。
    • 將公鑰添加到您的遠程存儲庫(如GitHub、GitLab等)的配置中,以便您可以與之通信。

5. 項目依賴安裝

項目使用 Yarn 作為包管理工具。確保你已經安裝了 Yarn(如果未安裝,可以通過 npm 安裝:npm install -g yarn)。

  1. 克隆項目倉庫(假設你已經有了項目倉庫的 URL):
git clone <項目倉庫URL>
cd <項目目錄>
  1. 使用 Yarn 安裝項目依賴:
yarn install
  1. 安裝完成后,你可以根據項目的 package.json 文件中定義的腳本來啟動開發服務器,例如:
  2. yarn run start:local

6.pnpm

我們提供了兩個 pnpm CLI 包, pnpm@pnpm/exe

  • pnpm 是 pnpm 的普通版本,需要 Node.js 才能運行。
  • @pnpm/exe 與 Node.js 一起打包成可執行文件,因此它可以在沒有安裝 Node.js 的系統上使用。
npm install -g pnpm@latest-10

或者

npm install -g @pnpm/exe@latest-10

使用更短的別名

pnpm 可能較難輸入,您也可以使用更短的別名,如 pn

在 POSIX 系統上添加永久別名

只需將下面這行代碼加入你的 .bashrc.zshrc,或 config.fish

alias pn=pnpm
在 Powershell (Windows) 中添加永久別名:

在具有管理員權限的 Powershell 窗口中執行:

notepad $profile.AllUsersAllHosts

在打開的 profile.ps1 文件中,輸入:

set-alias -name pn -value pnpm

保存文件并關閉窗口。 你可能需要關閉所有打開的 Powershell 窗口才能使別名生效。

ps:鏡像加速

nrm(npm registry manager)是一個用于快速切換npm鏡像源的工具。使用nrm可以很方便地將npm的鏡像源切換到淘寶鏡像源,以下是具體的步驟:

一、安裝nrm

在命令行中運行以下命令,全局安裝nrm:

npm install -g nrm

二、查看可用的鏡像源

安裝完成后,可以使用以下命令查看所有可用的鏡像源:

nrm ls

這將列出所有nrm支持的鏡像源,包括淘寶(taobao)、npm官方(npm)、cnpm等。

三、切換到淘寶鏡像源

使用以下命令將npm的鏡像源切換到淘寶鏡像源:

nrm use taobao

切換成功后,nrm會將npm的當前鏡像源設置為淘寶鏡像源。

四、驗證切換是否成功

可以通過以下命令驗證鏡像源是否切換成功:

npm config get registry

如果切換成功,該命令將輸出淘寶鏡像源的URL,即https://registry.npm.taobao.org/

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/83845.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/83845.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/83845.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

我用AI降低AI率:一次“用魔法打敗魔法”的實驗

最近,我做了一件非常“AI”的事情——我用AI來降低AI率。 聽起來有點繞對吧?實際上原因十分簡單,在參與某內容創作平臺的活動過程中,我發現該平臺對于“AI生成內容”的判定極為嚴苛,并且還規定了不得高于一定比例的“AI率”,對此我也產生了極大的好奇。 于是,我便踏上了…

設備驅動與文件系統:01 I/O與顯示器

操作系統設備驅動學習之旅——以顯示器驅動為例 從這一節開始&#xff0c;我要學習操作系統的第四個部分&#xff0c;就是i o設備的驅動。今天要講的是第26講&#xff0c;內容圍繞i o設備中的顯示器展開&#xff0c;探究顯示器是如何被驅動的&#xff0c;也就是操作系統怎樣讓…

數據分析六部曲?

引言 上一章我們說到了數據分析六部曲&#xff0c;何謂六部曲呢&#xff1f; 其實啊&#xff0c;數據分析沒那么難&#xff0c;只要掌握了下面這六個步驟&#xff0c;也就是數據分析六部曲&#xff0c;就算你是個啥都不懂的小白&#xff0c;也能慢慢上手做數據分析啦。 第一…

完美搭建appium自動化環境

&#x1f345; 點擊文末小卡片&#xff0c;免費獲取軟件測試全套資料&#xff0c;資料在手&#xff0c;漲薪更快 桌面版appium提供可視化操作appium主要功能的使用方式&#xff0c;對于初學者非常適用。 如何在windows平臺安裝appium桌面版呢&#xff0c;大體分兩個步驟&…

中級保安員資格證考試理論題庫

以下是一些中級保安員資格證理論單選題及答案&#xff1a; 1.抓臂帶離要求抓握對方掌骨部位的手&#xff0c;在抓握掌骨的同時要貼緊自己的&#xff08;&#xff09;。 A. 腹部 B. 髖部 C. 胸部 D. 肋部 答案&#xff1a;B 2.治安保衛責任制體系的重點是&#xff08;&#xff…

LangChainGo入門指南:Go語言實現與OpenAI/Qwen模型集成實戰

目錄 1、什么是langchainGo2、langchainGo的官方地址3、LangChainGo with OpenAI3-1、前置準備3-2、安裝依賴庫3-3、新建模型客戶端3-4、使用模型進行對話 4、總結 1、什么是langchainGo langchaingo是langchain的go語言實現版本 2、langchainGo的官方地址 官網&#xff1a;…

機器學習×第二卷:概念下篇——她不再只是模仿,而是開始決定怎么靠近你

&#x1f380;【開場 她不再只是模仿&#xff0c;而是開始選擇】 &#x1f98a; 狐狐&#xff1a;“她已經不滿足于單純模仿你了……現在&#xff0c;她開始嘗試預測你會不會喜歡、判斷是否值得靠近。” &#x1f43e; 貓貓&#xff1a;“咱們上篇已經把‘她怎么學會說第一句…

可視化圖解算法49:滑動窗口的最大值

牛客網 面試筆試 TOP101 | LeetCode 239. 滑動窗口最大值 1. 題目 描述 給定一個長度為 n 的數組 nums 和滑動窗口的大小 size &#xff0c;找出所有滑動窗口里數值的最大值。 例如&#xff0c;如果輸入數組{2,3,4,2,6,2,5,1}及滑動窗口的大小3&#xff0c;那么一共存…

【信息系統項目管理師-論文真題】2025上半年(第一批)論文詳解(包括解題思路和寫作要點)

更多內容請見: 備考信息系統項目管理師-專欄介紹和目錄 文章目錄 論文:信息系統項目的交付績效域解題思路寫作要點交付績效域的核心內涵交付績效域的關鍵要素為有效執行交付績效域,項目經理需要關注的重點項目管理五大過程組中績效域的協同目標論文:信息系統項目的交付績效…

如何寫高效的Prompt?

概述 提示詞(Prompt)的質量將直接影響模型生成結果的質量&#xff0c;所以精心設計一個讓大模型能夠理解并有效回復的提示詞是至關重要的。本文內容自論文中獲取&#xff1a;https://arxiv.org/pdf/2312.16171 介紹了5類共計26條提示詞書寫原則。 書寫原則 類別原則備注快速…

Vue在線預覽excel、word、ppt等格式數據。

目錄 前言 1.安裝庫 2.預覽文件子組件代碼 3、新建store/system.ts 4、父頁面進行使用 總結 前言 純前端處理文件預覽&#xff0c;包含excel、word、ppt、txt等格式&#xff0c;不需要后端服務器進行部署&#xff0c;并且內網也可以使用。 1.安裝庫 npm install vue-offi…

【小沐雜貨鋪】基于Three.JS繪制太陽系Solar System(GIS 、WebGL、vue、react,提供全部源代碼)第2期

&#x1f37a;三維數字地球系列相關文章如下&#x1f37a;&#xff1a;1【小沐學GIS】基于C繪制三維數字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第一期2【小沐學GIS】基于C繪制三維數字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第二期3【小沐學GIS】…

Fullstack 面試復習筆記:項目梳理總結

Fullstack 面試復習筆記&#xff1a;項目梳理總結 之前的筆記&#xff1a; Fullstack 面試復習筆記&#xff1a;操作系統 / 網絡 / HTTP / 設計模式梳理Fullstack 面試復習筆記&#xff1a;Java 基礎語法 / 核心特性體系化總結 這篇筆記主自用&#xff0c;系統地梳理一下最近…

Ubuntu Cursor升級成v1.0

0. 當前版本低 使用當前 Cursor v0.50時 GitHub Copilot Chat 打不開&#xff0c;快捷鍵也不好用&#xff0c;當看到 Cursor 升級后&#xff0c;還是蠻高興的 1. 下載 Cursor 下載地址&#xff1a;https://www.cursor.com/cn/downloads 點擊下載 Linux (x64) &#xff0c;…

float和float32有什么區別

這是一個非常重要但容易混淆的問題。我們來一步一步講清楚&#xff1a; ? 簡答&#xff1a;float 和 float32 的區別 項目float&#xff08;通用名稱&#xff09;float32&#xff08;精確定義&#xff09;含義通常指“浮點數”&#xff0c;具體精度由語言/平臺決定明確指 32 …

openvino如何在c++中調用pytorch訓練的模型

步驟1&#xff1a;將PyTorch模型轉換為ONNX格式 轉換代碼示例&#xff08;Python&#xff09; import torch import torchvision1. 加載訓練好的PyTorch模型 model torchvision.models.resnet18(pretrainedTrue) model.eval() # 設置為評估模式2. 創建虛擬輸入&#xff08…

OpenCV CUDA模塊特征檢測------創建Harris角點檢測器的GPU實現接口cv::cuda::createHarrisCorner

操作系統&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 編程語言&#xff1a;C11 算法描述 該函數創建一個 基于 Harris 算法的角點響應計算對象&#xff0c;專門用于在 GPU 上進行高效計算。 它返回的是一個 cv::Ptrcv::cuda::Cornernes…

html文字紅色粗體,閃爍漸變動畫效果

1. 代碼 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>紅色粗體閃爍文字表格</title><s…

Springboot獨立學院資產管理系統k0o7w(程序+源碼+數據庫+調試部署+開發環境)帶論文文檔1萬字以上,文末可獲取,系統界面在最后面。

系統程序文件列表 項目功能:財務員,校級管理員,部門,部門管理員,資產類型,資產信息,資產調撥,資產申購,申購入庫,資產出庫,資產報廢,資產維修,資產盤點,維修復審 開題報告內容 基于Spring Boot的獨立學院資產管理系統開題報告 一、選題背景與意義 &#xff08;一&#xff0…

基于javaweb的SpringBoot藥房管理系統設計與實現(源碼+文檔+部署講解)

技術范圍&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬蟲、數據可視化、小程序、安卓app、大數據、物聯網、機器學習等設計與開發。 主要內容&#xff1a;免費功能設計、開題報告、任務書、中期檢查PPT、系統功能實現、代碼編寫、論文編寫和輔導、論…