[今日白學]npm、Vue-CLi 3.x腳手架的安裝教程

#今天也是摸魚的一天#  

本文章僅用作於個人學習筆記（羞恥+1）複製程式碼

一、Node Package(包) Manager(管理器)

npm:是隨同NodeJS一起安裝的包管理工具，包的結構使您能夠輕鬆跟蹤依賴項和版本。常用的如下:

• 下載可立即使用的獨立工具。
  
• 與任何npm使用者共享程式碼。
  

話不多說，我們先安裝NodeJS（npm也整合在裡面）：

1. 首先從 NodeJs官網 安裝（本次安裝示例為 64位 Windows版本）
2. 安裝NodeJs安裝包 ，我們選擇把NodeJs安裝到 D盤（無腦下一步就好）
3. 安裝完成後 目錄 會有以下檔案
4. 進入終端(CMD)檢視是否正常

node -v        檢視Node版本

npm -v         檢視npm版本

echo %PATH%    檢視系統變數複製程式碼

   5.更改 全域性模組存放路徑 由於我們把NodeJs安裝在了D盤 ，為了方便管理也把npm的本地倉庫路徑（預設安裝在C盤）更改到 D盤

npm config set prefix "D:\nodejs\node_global"      設定全域性模組存放路徑

npm config set cache "D:\nodejs\node_cache"     設定快取資料夾

npm list -global        檢視本地全域性安裝的包（檢視是否更改路徑成功）

npm install -g cnpm --registry=https://registry.npm.taobao.org    安裝 淘寶NPM​映象 (cnpm) 以提升速度（npm是從國外伺服器下載，受網路影響大，可能出現異常）
複製程式碼

npm config list         顯示所有配置資訊​複製程式碼

二、Vue-CLi 3.x腳手架

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題，Vue CLI提供：

• 通過 @vue/cli搭建互動式的專案腳手架。
  
• 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發
  

我們可以根據 Vue-CLi官方提供的文件 進行安裝

   1.安裝Vue-CLi包

cnpm install -g @vue/cli        用cnpm(淘寶映象)安裝Vue-CLi腳手架的包到全域性目錄下複製程式碼

   2.檢查其版本是否正確

vue --version        檢查其版本是否正確 (3.x)複製程式碼

因為我們已經更改了vue指令碼的global路徑，需要向path環境變數中新增全域性模組的目錄路徑

新增global目錄路徑到path環境變數中

vue --version        再次檢查其版本是否正確 (3.x)複製程式碼

   2.建立一個專案

vue create hello-world        建立一個名為 hello-world 的專案複製程式碼

cd hello-world      進入專案資料夾
npm run serve       啟動本地開發環境複製程式碼

 http://localhost:8080/     開啟瀏覽器進入複製程式碼

目錄結構如下複製程式碼