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

const白發表於2019-03-25
NPMVue
#今天也是摸魚的一天#  

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

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

npm:是隨同NodeJS一起安裝的包管理工具，包的結構使您能夠輕鬆跟蹤依賴項和版本。常用的如下:
  • 下載可立即使用的獨立工具。
  • 與任何npm使用者共享程式碼。

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

  1. 首先從 NodeJs官網 安裝（本次安裝示例為 64位 Windows版本）[今日白學]npm、Vue-CLi 3.x腳手架的安裝教程
  2. 安裝NodeJs安裝包 ，我們選擇把NodeJs安裝到 D盤（無腦下一步就好）[今日白學]npm、Vue-CLi 3.x腳手架的安裝教程
  3. 安裝完成後 目錄 會有以下檔案[今日白學]npm、Vue-CLi 3.x腳手架的安裝教程
  4. 進入終端(CMD)檢視是否正常
node -v        檢視Node版本

npm -v         檢視npm版本

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

[今日白學]npm、Vue-CLi 3.x腳手架的安裝教程   5.更改 全域性模組存放路徑 由於我們把NodeJs安裝在了D盤 ，為了方便管理也把npm的本地倉庫路徑（預設安裝在C盤）更改到 D盤   （這裡需要在D:\nodejs目錄下建立一個空的node_global資料夾）

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、Vue-CLi 3.x腳手架的安裝教程


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

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

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

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


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

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

二、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腳手架的包到全域性目錄下複製程式碼

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

   2.檢查其版本是否正確

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

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

   2.建立一個專案

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

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

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

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

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

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

目錄結構如下複製程式碼

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


相關文章