npm和cnpm安裝學習
阿新 • • 發佈：2021-06-23
解除安裝：先程式和安裝包解除安裝
C:\Users\Administrato\.npmrc
當你搞錯了之後這個一定要解除安裝或修改
下面是正確的先看看就好
prefix=E:\Program Files\nodejs\node_global
cache=E:\Program Files\nodejs\node_cache
registry=http://registry.npm.taobao.org
Node.js 安裝包及原始碼下載地址為：https://nodejs.org/en/download/
這個很簡單，接受一下協議，**除了地址以外都不要改**直接下一步到完成
E:\Program Files\nodejs\ //這個環境變數path會自動配，可以去瞅一眼，我的裝在了E:\Program Files\目錄下
win+r cmd回車 輸入node -v 和npm -v //測下版本
這時可以進入 “C:\Users\Administrator\AppData\Roaming” 目錄 可以看到下圖所示的資料夾，
建立完之後執行下面2個命令
Npm config set prefix “E:\Program Files\nodejs\node_global”
Npm config set cache “E:\Program Files\nodejs\node_cache”
執行完畢後 輸入命令 npm list -global 檢視一下npm的本地倉庫，
沒有截圖成功了就顯示我們改完的路徑E:\Program Files\nodejs\node_global
剛開始為空顯示<empty>
使用 npm config set registry=http://registry.npm.taobao.org 配置映象站 提升速度 然後再使用命令 npm config list 檢視一下配置資訊，配置資訊如圖所示：
C:\Users\Administrator>npm config list
; "builtin" config from E:\Program Files\nodejs\node_global\node_modules\npm\npmrc
; prefix = "C:\\Users\\Administrator\\AppData\\Roaming\\npm" ; overridden by user
; "user" config from C:\Users\Administrator\.npmrc 用文字編輯器看一下，就下面這三個
cache = "E:\\Program Files\\nodejs\\node_cache"
prefix = "E:\\Program Files\\nodejs\\node_global"
registry = "http://registry.npm.taobao.org/"
; node bin location = E:\Program Files\nodejs\node.exe
; cwd = C:\Users\Administrator
; HOME = C:\Users\Administrator
; Run `npm config ls -l` to show all defaults.
xanpm config get registry //看一下映象可行顯示如下
//http://registry.npm.taobao.org/
使用命令 npm install npm -g
npm install 是更新安裝命令
-g 就是安裝到 E:\Program Files\nodejs\node_global （你的安裝目錄下）的意思
更新完畢後 再使用命令 npm-v 檢視 npm 的版本號， 可以看出npm的版本升級啦，在使用 npm list -global 檢視 global 有什麼模組，如圖所示檔案裡不再是空的啦（注意下模組目錄變成我們希望的了，）
-
設定環境變數
-
使用命令npm install vue -g 測試 npm 安裝 vue,出現入下圖所示的情況，就會在預設的模組的目錄下看見vue的資料夾，如圖所示：
-
使用命令 npm install vue-router -g 測試npm安裝vue-router 如圖所示，安裝過後會在預設的模組目錄下找到 vue-router的資料夾
-
使用命令 npm install vue-cli -g 安裝vue的腳手架，如圖所示
（我用上述格式最後使用vue -V的時候出錯 ，檢視別人的 npm install -g vue-cli這種格式應該比較好吧）
-
設定 PATH 環境變數 將 你的安裝目錄的模組目錄新增到PATH環境變數中(C:\Program Files\nodejs\node_global)
-
使用命令 vue -V 檢視vue的腳手架的版本號，如圖所示
-
測試vue是否可用
1） 重新開啟cmd 切換到任意的根目錄，如圖
2） 在根目錄中輸入命令
vue init webpack vue01如圖所示
注意：圖中有點帶綠色的字都是要自己輸入的，別傻等著不行就回車測試一下
E:\>cd vue01 //進入目錄
E:\vue01>npm install //執行命令
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
added 3 packages in 3s
E:\vue01>npm run dev //執行npm run dev
> [email protected] dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 26/31 modules 5 active ...template&index=0!E:\vue01\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 3337ms 下午8:30:22
I Your application is running here: http://localhost:8080 //成功
開啟網址出現如下介面
//到這裡不懂了，還沒有學習vue
6）npm run build 生成靜態檔案
7）npm 新建的vue01的專案目錄如下：
build：構建指令碼的目錄
config：構建配置的目錄
dist：生成結果的目錄
node_modules：依賴包的目錄
src-assets：資源目錄
src-components：元件目錄
src-router：路由
src-App.vue：頁面級元件
src-main.js：入口js
index.html：入口頁面
packge.json：專案描述檔案
packge-lock.json：專案描述檔案
其他的檔案就不用管啦
cnpm只要一個
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install bootstrap-table --save //下載bootstrap-table
//下載什麼就換成什麼，比如mockjs，bootstrap，jquery等等，
//在哪裡下載就在資料夾上面的路徑 前面加個cmd然後回車輸入會自動生成node_modules資料夾放到裡面
我們要的是裡面的dist（兩個一樣）資料夾，將dist資料夾改成對應的需要檔名，copy到程式中