vue創(chuàng)建前端項目

安裝VScode

直接在官網(wǎng)進(jìn)行下載https://code.visualstudio.com/

• 首頁

• vscode設(shè)置成中文

默認(rèn)為英文，可以通過下面的操作改為中文

1.按快捷鍵"Ctrl + Shift + P"(也可以使用點擊圖片的位置)

2.輸入"configure Display language",然后回車

3.選擇中文就可以了，可能會需要重啟，重啟這個軟件就好了

如何不想設(shè)置，也可以通過在拓展商店中安裝中文插件就可以

到這一步也就安裝好常用的工具，但是還不能創(chuàng)建項目之類的，也就是只有一個工具了。在這我講解一下如何安裝前端需要的。

打開終端

在終端中點擊 新建終端 ，就可以打開一個終端窗口，可以在里面使用命令符

切換至cmd命令終端

在這切換就可以了

卸載node

如果電腦中已經(jīng)安裝了node,建議卸載之前安裝的，否則可能會產(chǎn)生問題，比如無法切換node版本，提示exit staus 145 錯誤等。

安裝nvm

項目依賴的node版本是不一樣的，但是原始切換版本很麻煩，需要手動去修改環(huán)境變量 所以有個node版本的切換器,會很方便, nvm就是這樣一個工具

安裝地址

Releases · coreybutler/nvm-windows (github.com)

• 注意這里有noinstall和setup版，區(qū)別是前者是免安裝，需手動配置，新手推薦使用后者，免配置

選擇NVM的安裝路徑?？梢园凑諅€人習(xí)慣，自行選擇安裝路徑。

選擇NodeJS的Symlink (符號鏈接)文件夾的位置，用于生成NodeJS的映射目錄。

安裝之后可以在cmd中使用 “nvm -v”，如果提示版本號則證明安裝成功了

修改nvm的安裝配置

因為nvm默認(rèn)安裝node使用的是國外的鏡像，為了避免安裝失敗，所以要修改一下nvm配置，首先打開你的nvm所在文件夾，用編輯器打開settings.txt

然后在文件里面添加兩條內(nèi)容，分別是node和npm的下載源，如下：

node_mirror https://npm.taobao.org/mirrors/node/
npm_mirror https://npm.taobao.org/mirrors/npm/

安裝node

• 在終端或命令cmd輸入 nvm install [version] ,然后回車即可,這里的version指的是你想要安裝的node版本，下同。
• 安裝完成后使用nvm ls available查看已安裝的node版本

• CURRENT：為當(dāng)前最新的版本
• LTS：為穩(wěn)定版本
• OLD：歷史版本

建議選擇LTS穩(wěn)定版的

• 使用nvm use [version]來使用你選擇的node版本
• 也可使用nvm uninstall [version]卸載node版本

例如nvm install 20.10.0則是安裝v20.10.0版本的node，而nvm uninstall 20.10.0為卸載v20.10.0版本的node

安裝完成后在命令行工具輸入node -v和npm -v檢查是否安裝成功，若命令行輸出版本號則說明安裝成功。

配置npm

首先打開你安裝nvm時創(chuàng)建的nodejs文件夾（需要使用nvm安裝某個node版本后才會出現(xiàn)nodejs文件夾），然后在里面創(chuàng)建node_global和node_cache兩個文件夾。

在這我創(chuàng)建nvm時多了一層，所以我放在同層了。

然后在命令行工具執(zhí)行下面兩條命令來修改npm全局安裝包和緩存的位置：

修改npm的包的全局安裝路徑,

npm config set prefix "D:\Program Files\nvm\node_global"

修改npm的包的全局cache位置

npm config set cache "D:\Program Files\nvm\node_cache"

查看當(dāng)前npm包的全局安裝路徑

npm prefix -g 

查看當(dāng)前npm包的全局cache路徑

npm config get cache

最后配置環(huán)境變量

此電腦 -> 屬性 -> 高級系統(tǒng)設(shè)置 -> 環(huán)境變量 -> 系統(tǒng)變量 -> path ->編輯 - > 新增路徑 - D:\Program Files\nvm\node_global"（路徑可以根據(jù)npm prefix -g查看）

更多的nvm命令

nvm list ：列出所有已安裝的 node 版本
nvm list available ：顯示所有可下載的版本
nvm install stable ：安裝最新版 node
nvm install [node版本號] ：安裝指定版本 node
nvm uninstall [node版本號] ：刪除已安裝的指定版本
nvm use [node版本號] ：切換到指定版本 node
nvm current ：當(dāng)前 node 版本
nvm alias [別名] [node版本號] ：給不同的版本號添加別名
nvm unalias [別名] ：刪除已定義的別名
nvm alias default [node版本號] ：設(shè)置默認(rèn)版本

安裝vue腳手架

執(zhí)行命令

安裝
npm install -g vue
npm install -g @vue/cli

(如果執(zhí)行失敗，提示vue不是內(nèi)部命令，需要卸載重新安裝)

卸載
npm uninstall vue-cli -g

檢驗是否安裝成功

vue -V

下面是執(zhí)行成功

創(chuàng)建前端項目

我這里是使用vue腳手架通過ui界面創(chuàng)建的項目

在命令行中執(zhí)行vue ui，這個目錄是我專門存儲項目的路徑

然后跳轉(zhuǎn)到這個網(wǎng)址

在這個里面就可以創(chuàng)建項目了

如果選擇手動，則需要自己選擇功能，我這里選擇的是default vue3,選擇后就可以直接創(chuàng)建項目了

創(chuàng)建之后，就可以進(jìn)行自己的操作了，如果想要添加其他的功能，也可以直接在這個頁面進(jìn)行對應(yīng)的操作

啟動項目

創(chuàng)建好之后，回到vscode，點擊上面的文件 -> 打開文件夾，選擇對應(yīng)的文件即可

點擊啟動，項目就可以啟動了，然后在瀏覽器中打開Local的網(wǎng)址就可以訪問了

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。