npm和cnpm安裝學習

參考自很細節

npm

卸載：先程序和安裝包卸載

 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” 目錄 可以看到下圖所示的文件夾，

如果要是使用過還會出現一個 npm-cache 的文件夾,可以試着把這兩個文件夾移動到你的 npm 安裝目錄下 ，首先在安裝目錄下新建立下圖兩個所示的文件夾

 

 建立完之后執行下面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 有什么模塊，如圖所示文件里不再是空的啦（注意下模塊目錄變成我們希望的了，）
         
        

1. 設置環境變量

2. 使用命令npm install vue -g 測試 npm 安裝 vue,出現入下圖所示的情況，就會在默認的模塊的目錄下看見vue的文件夾，如圖所示：

3. 使用命令 npm install vue-router -g 測試npm安裝vue-router 如圖所示，安裝過后會在默認的模塊目錄下找到 vue-router的文件夾

4. 使用命令   npm install vue-cli -g 安裝vue的腳手架，如圖所示

   （我用上述格式最后使用vue -V的時候出錯 ，查看別人的 npm install -g vue-cli這種格式應該比較好吧）

5. 設置 PATH 環境變量 將 你的安裝目錄的模塊目錄添加到PATH環境變量中(C:\Program Files\nodejs\node_global)

6. 使用命令 vue -V 查看vue的腳手架的版本號，如圖所示

7. 測試vue是否可用

           1） 重新打開cmd 切換到任意的根目錄，如圖

        2） 在根目錄中輸入命令

    vue init webpack vue01

   如圖所示

   注意：圖中有點帶綠色的字都是要自己輸入的，別傻等着不行就回車測試一下

 ​
 E:\>cd vue01  //進入目錄
 ​
 E:\vue01>npm install //執行命令
 npm WARN deprecated fsevents@1.2.13: 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
 ​
 > vue01@1.0.0 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到程序中

---