1. 程式人生 > >從零初始化一個Vue專案【vue環境搭建】

從零初始化一個Vue專案【vue環境搭建】

【nvm +node + npm + vue-cli 】完成vue專案初始化過程
後期可以自行安裝和使用webpack模板初始化vue專案
Node.js NPM安裝方式
1.直接使用安裝包進行傻瓜式單擊安裝,此方式比較簡單不推薦 後期更改node版本不方便

2.nvm (node.js 版本管理器)

2.1 下載地址 : https://github.com/coreybutler/nvm-windows

在這裡插入圖片描述

2.2 單擊download now

在這裡插入圖片描述

2.3 下載
在這裡插入圖片描述
2.4 解壓
在這裡插入圖片描述

2.5 在C盤根目錄新建
2.6 在nvm資料夾下新建一個 settings.txt 的文字文件
在這裡插入圖片描述

2.7 在setttings.txt 中去新增程式碼,配置下載的node地址,版本等
在這裡插入圖片描述
注意npm的下載地址圖片上面配置出錯了,應該是:npm_mirror:http://npm.tao.org/mirrors/npm/
2.8 配置環境變數
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

nvm 配置安裝完成
3.開始下載node.js

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

使用:nvm use 版本號 //切換node.js的當前使用版本
檢視檔案目錄結構:已經成功
在這裡插入圖片描述

在這裡插入圖片描述

Node.js版本切換
在這裡插入圖片描述

nvm命令
nvm list 檢視所有安裝的node版本
nvm off 關閉nvm的功能
nvm on 開啟nvm的功能

npm命令
npm -v 檢視npm版本
npm init 初始化一個npm包
npm install 安裝線上包
npm uninstall 解除安裝已安裝包
npm info 檢視安裝包資訊
npm list 檢視本地已安裝包列
npm show 檢視安裝包資訊
npm run ? 執行定義指令碼

更改下載的連線
在這裡插入圖片描述

如果這一步報錯
在這裡插入圖片描述
解決方式:
在環境變數中新增 NPM_HOME C:\dev\nvm\npm
在path 變數的最前面加上: ;%NPM_HOME%;
在這裡插入圖片描述

在這裡插入圖片描述

  1. npm 安裝vue
    4.1初始化包

在這裡插入圖片描述
4.2 下載安裝包
在這裡插入圖片描述

檢視新建的專案資料夾
在這裡插入圖片描述
檢視 package.json 檔案

在這裡插入圖片描述

npm命令
npm list -g 檢視npm之前安裝的所有的包
npm list -g --depth 0 檢視npm安裝的全域性包
npm install vue-cli -g 全域性安裝 vue-cli 也就是vue開發的腳手架
npm install vue --save 安裝vue --save(同時安裝vue的依賴)
npm config list 檢視npm 的下載的地址連結

更改npm下載的連線到淘寶的連線上
npm config set regestry http://registry.npm.taobao.org