nvm+node+vite+vue3

zy平平仄仄發表於2024-11-23

=========================nvm================================================

  nvm 好處:

    安裝node很方便,只需要一條命令
    可以輕鬆切換node版本
    可以多版本node並存

  下載 nvm 安裝包 github地址:https://github.com/coreybutler/nvm-windows/releases

  setting.txt中 新增
    npm_mirror:https://npmmirror.com/mirrors/npm/
    node_mirror:https://npmmirror.com/mirrors/node/

  1.開啟cmd視窗輸入 nvm list available 就可以看到我們能夠安裝的node版本。

  

  2.輸入 nvm install "node對應的版本號"就可以下載node

  nvm install 20.10.0

  

  3. nvm ls 檢視本地node 版本

  

  4.nvm use "本地已有版本號" 使用

  nvm use 20.10.1

-----------------------nvm的常用命令---------------------------------------------

  nvm list available //檢視檢視可安裝的node版本
  nvm version //安裝指定版本的 Node.js、簡寫 nvm -v
  nvm install <version> //安裝指定版本的 Node.js。
  nvm use <version> //切換使用指定版本的 Node.js。
  nvm list //列出已安裝的所有 Node.js 版本、簡寫 nvm ls
  nvm alias <name> <version> //建立一個別名以便更方便地引用特定的 Node.js 版本。
  nvm uninstall <version> //解除安裝指定的 Node.js 版本。
  nvm current //顯示當前正在使用的 Node.js 版本。
  nvm use default //切換到預設的 Node.js 版本(由 nvm alias 命令設定的別名)。
  nvm exec <version> <command> //在指定版本的 Node.js 環境中執行特定的命令。

============================node=============================================

  //檢視node 版本

  node -v

  //檢視映象地址
  npm config get registry

  //npm淘寶映象
  npm config set registry https://registry.npmmirror.com
  //恢復映象
  npm config set registry https://registry.npmjs.org

  安裝pnpm (就是速度快)

  官網:https://pnpm.io GitHub:https://github.com/pnpm/pnpm

  pnpm 將依賴儲存在某一位置。當被安裝時,包裡的檔案會硬連結到這一位置,而不會佔用額外的空間,這允許我們跨專案地共享同一版本的依賴;安裝時間也會快很多,對於已經有的依賴,不用再次下載。

  使用npm安裝 :npm i -g pnpm

  

  前面設定了 node 映象地址,這裡不需設定了

  //檢視映象地址

  pnpm config get registry

  

============================vite=============================================

  Vite是一種新型前端構建工具,能夠顯著提升前端開發體驗。它主要由兩部分組成:

    一個開發伺服器,它基於 原生 ES 模組 提供了 豐富的內建功能,如速度快到驚人的 模組熱更新(HMR)。

    一套構建指令,它使用 Rollup 打包你的程式碼,並且它是預配置的,可輸出用於生產環境的高度最佳化過的靜態資源。

  Vite 是一種具有明確建議的工具,具備合理的預設設定。您可以在 功能指南 中瞭解 Vite 的各種可能性。透過 外掛,Vite 支援與其他框架或工具的整合。如有需要,您可以透過 配置部分 自定義適應你的專案。

  Vite 還提供了強大的擴充套件性,可透過其 外掛 API 和 JavaScript API 進行擴充套件,並提供完整的型別支援。

  官方文件:https://vitejs.cn/vite5-cn/

  搭建一個 Vite 專案:兩種方式 搭建 使用第一種: pnpm create vite

  

  後面就是專案名稱,選擇專案型別 是 vue ,使用 TypeScript

  

  根據 提示, 進入專案資料夾,install 一下, 讓vue 專案 跑起來

    cd vite-vue3-demo
    pnpm install
    pnpm run dev

  

  瀏覽器輸入 http://localhost:5173/ 檢視

  

  檢視專案資料夾中 package.json 檔案中vue 版本是否是vue3

  

  vue3官方:https://cn.vuejs.org/

======================================= 基礎環境 搭建vue3 專案 完成 ==========================================================