如何搭建一個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
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...