如何搭建一個vue項目

来源:https://www.cnblogs.com/xiezhr/archive/2023/05/17/17344801.html
-Advertisement-
Play Games

(如何搭建一個vue項目) 一、nvm 安裝與使用 1.1、nvm簡介 nvm全名node.js version management,顧名思義是一個nodejs的版本管理工具。通過它可以安裝和切換不同版本的nodejs 1.2、nvm下載 ①github下載 https://github.com/ ...


目錄

一、nvm 安裝與使用

1.1、nvm簡介

nvm全名node.js version management,顧名思義是一個nodejs的版本管理工具。通過它可以安裝切換不同版本的nodejs

1.2、nvm下載

①github下載
https://github.com/coreybutler/nvm-windows/releases
在這裡插入圖片描述
②百度網盤下載
鏈接:https://pan.baidu.com/s/18FZuhmw7OCFeLFpQmf7u6w
提取碼:lnaf

1.3、 nvm 安裝

① 雙擊nvm-setup.exe可執行文件
在這裡插入圖片描述
② 選擇nvm安裝路徑
在這裡插入圖片描述
③選擇nodejs安裝路徑
在這裡插入圖片描述
④安裝
在這裡插入圖片描述
⑤檢查是否安裝成功

C:\Users\xiezhr>nvm version
1.1.9

④nvm 常用命令

 # 顯示可以安裝的所有nodejs版本
nvm list available 
 # 安裝指定版本的nodejs
nvm install <version> 
# 顯示已安裝版本列表
nvm list
# 使用指定版本node
nvm use [version]
# 卸載指定版本node
nvm uninstall <version>

二、nodejs安裝

2.1 nodejs簡介

Node.js is an open-source, cross-platform JavaScript runtime environment.
Node.js是一個開源、跨平臺的JavaScript運行時環境。

2.2 nodejs官網

https://nodejs.org/en/

在這裡插入圖片描述

2.3 查看nodejs 所有版本

nvm list available

C:\Users\xiezhr>nvm list available
|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   18.10.0    |   16.17.1    |   0.12.18    |   0.11.16    |
|    18.9.1    |   16.17.0    |   0.12.17    |   0.11.15    |
|    18.9.0    |   16.16.0    |   0.12.16    |   0.11.14    |
|    18.8.0    |   16.15.1    |   0.12.15    |   0.11.13    |
|    18.7.0    |   16.15.0    |   0.12.14    |   0.11.12    |
|    18.6.0    |   16.14.2    |   0.12.13    |   0.11.11    |
|    18.5.0    |   16.14.1    |   0.12.12    |   0.11.10    |
|    18.4.0    |   16.14.0    |   0.12.11    |    0.11.9    |
|    18.3.0    |   16.13.2    |   0.12.10    |    0.11.8    |
|    18.2.0    |   16.13.1    |    0.12.9    |    0.11.7    |
|    18.1.0    |   16.13.0    |    0.12.8    |    0.11.6    |
|    18.0.0    |   14.20.1    |    0.12.7    |    0.11.5    |
|    17.9.1    |   14.20.0    |    0.12.6    |    0.11.4    |
|    17.9.0    |   14.19.3    |    0.12.5    |    0.11.3    |
|    17.8.0    |   14.19.2    |    0.12.4    |    0.11.2    |
|    17.7.2    |   14.19.1    |    0.12.3    |    0.11.1    |
|    17.7.1    |   14.19.0    |    0.12.2    |    0.11.0    |
|    17.7.0    |   14.18.3    |    0.12.1    |    0.9.12    |
|    17.6.0    |   14.18.2    |    0.12.0    |    0.9.11    |
|    17.5.0    |   14.18.1    |   0.10.48    |    0.9.10    |

This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases

2.4 選擇需要的版本進行安裝

nvm install [version]

# 安裝16.17.1版本
C:\Users\xiezhr>nvm install 16.17.1
Downloading node.js version 16.17.1 (64-bit)...
Extracting...
Complete

Installation complete. If you want to use this version, type
nvm use 16.17.1

2.5 使用指定版本的node

C:\WINDOWS\system32>nvm use 16.17.1
Now using node v16.17.1 (64-bit)

註:在執行上面命令中可能會報如下錯,只需要將cmd切換到管理員登錄即可解決
在這裡插入圖片描述

2.6 查看當前node版本

# 查看node版本
C:\Users\xiezhr>node -v
v16.17.1
# 查看npm版本
C:\Users\xiezhr>npm -v
8.15.0

三 、鏡像管理工具NRM 安裝

3.1 安裝NRM

C:\Users\xiezhr>npm install -g nrm
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

added 58 packages in 6s
npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g [email protected] to update!
npm notice

3.2 nrm常用命令

# 查看鏡像列表
nrm ls
# 查看當前使用的鏡像
nrm current 
# 添加鏡像
nrm add <名稱> <遠程地址或私服地址>
# 刪除鏡像
nrm del <名稱>
# 切換鏡像
nrm use <名稱> 
# 測試鏡像網路傳輸速度
nrm test <名稱>
# 查看nrm版本號
nrm <-version | -V> 
# 查看nrm相關信息
nrm <-help | -h>
# 打開鏡像主頁
nrm home <名稱> [browser]
# 上傳npm包或命令程式
nrm publish [<tarball>|<folder>]

四 、創建vue項目

4.1 安裝vue-cli腳手架

#安裝最新版本的腳手架
npm install -g @vue/cli   
#卸載腳手架
npm uninstall -g @vue/cli

在這裡插入圖片描述

4.2 查看腳手架版本

# 查看vue腳手架版本,註意V是大寫
vue -V

在這裡插入圖片描述

4.3 創建vue項目

4.3.1 圖形化界面創建

①命令行輸入

C:\Users\xiezhr>vue ui


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在企業級應用中,數據的安全性和隱私保護是極其重要的。Spark 作為數棧底層計算引擎之一,必須確保數據只能被授權的人員訪問,避免出現數據泄露和濫用的情況。為了實現Spark SQL 對數據的精細化管理及提高數據的安全性和可控性,數棧基於 Apache Ranger 實現了 Spark SQL 對數據 ...
  • 隨著 Redis 資料庫的流行和廣泛應用,Redis 的開發、管理需求日益增多,數據管理產品的好用與否將直接影響研發效能的高低。在 Redis 官網提供的 RedisInsight、Redis CLI 提供一定的可視化管理、命令執行及語法提示等能力,但缺乏人員操作許可權管控(6.0以前的低版本)、人員... ...
  • 問題描述 新建表或者修改表varchar欄位長度的時候,出現這個錯誤 Row size too large. The maximum row size for the used table type, not counting BLOBs, is 65535. This includes stora ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: 亮 文章來源:GreatSQL社區原創 概念介紹 首先需要知道MySQL中觸發器特點,以及表table相關觸發器載入方式 MySQL中單個tri ...
  • 簡單講,handler就是兩個功能 插入消息,enqueuemessage,msg,when 從消息隊列中遍歷所有消息,比對msg.when和當前的when,找到合適的位置插入 處理消息,looper.loop會從messagequeue中調用next。取消息,如果消息還沒到時間該執行,就會比對時間 ...
  • 大家好,我是 DOM哥。給大家隆重介紹一個文生圖工具
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 如何優雅的基於 element-plus,封裝一個夢中情 dialog 優點 擺脫繁瑣的 visible 的命名,以及反覆的重覆 dom。 想法 將 dialog 封裝成一個函數就能喚起的組件。如下: addDialog({ title: ...
  • 在前端開發中,模塊化是一種將代碼拆分為獨立模塊的開發方法。它通過將功能相似或相關的代碼組織成可復用、可維護的模塊,以提高開發效率和代碼質量。 模塊化的主要目的是解決傳統的JS開發存在的問題,例如全局命名衝突、代碼復用困難、依賴管理混亂等。通過模塊化,可以將代碼拆分為獨立的功能模塊,每個模塊都有自己的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...