前言：重裝nodejs后，?vue-cli搭建項目后運行vue項目報錯報錯 "npm Error: Cannot find module npm-cli.js"?，同時發現npm?-v 也報錯。

分析:? vue-cli腳手架模板是基于node下的npm來完成安裝的，安裝vue-cli也會先安裝node；因為“npm -v”命令報錯，這里重裝nodejs，一步步到npm安裝全局依賴包。

?

NODEJS安裝

Nodejs下載網址：https://nodejs.org/en/download/。

Node.js已自帶npm，安裝Node.js時會一起安裝，npm的作用就是對Node.js依賴的包進行管理，也可以理解為用來安裝/卸載Node.js需要裝的東西；

?

更改全局依賴包安裝位置：

這里的環境配置主要配置的是npm安裝的全局模塊所在的路徑，以及緩存cache的路徑，之所以要配置，是因為以后在執行類似：npm install express? -g?（后面的可選參數-g，g代表global全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，占C盤空間。

?

操作流程：

在node.js安裝的文件夾中創建兩個文件夾【node_global】及【node_cache】，然后，打開cmd命令窗口，輸入

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"；

? ? ? ? ? ?

?

然后，在進入環境變量對話框，在【系統變量】下新建【NODE_PATH】，輸入【C:\Program Files\nodejs\node_global】，將【用戶變量】下的【Path】修改為【"C:\Program Files\nodejs\node_cache】

?

最后測試：npm install express -g ,安裝成功的話會在node_global看到express包

? ? ? ? ? ?

?

?

坑：全局安裝express測試錯誤如下

Unhandled rejection Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache\_cacache'，npm ERR! cb() never called!

?

上述錯誤是權限錯誤，需要管理員權限，注意win10家庭版系統沒有本地策略組、本地用戶和組。這里，可以使用多種方式在win10使用管理員權限打開cmd命令行界面，

方法一： “win+X”快捷鍵打開開始菜單，選擇管理員權限打卡命令行窗口，如下圖

?

方法二，開始菜單搜索，輸入cmd，搜索出來的結果，右鍵選擇 管理員打開，如下圖

注意：一般使用“win+R ”快捷鍵 打開cmd命令行界面打開得是默認打開一個普通權限cmd窗口

?

?

CNPM：淘寶npm鏡像

??到目前為止，node的環境已經安裝完成，npm 包管理器也有了，由于有些npm資源被屏蔽或者是國外資源的原因，經常會導致npm安裝依賴包的時候失敗，所以我們還需要npm的國內鏡像----cnpm.

安裝cnpm： 在命令行中輸入???npm install -g cnpm --registry=https://registry.npm.taobao.org ?，完成之后，我們就可以用cnpm代替npm來安裝依賴包了。

運行“ cnpm -v ” 檢查是否安裝成功, 如果報錯 “cnpm不是內部或外部命令...”??裝則可能是環境變量配置的用戶變量中path指向的全局依賴包實際指向的位置錯誤。也可能是多次安裝后造成cnpm和npm不在一個目錄下安裝的。

?

?

Vue-cli?腳手架構建項目

安裝vue-cli 腳手架構建工具，在命令行中運行命令?cnpm install -g vue-cli；

使用vue-cli創建項目，首先將cmd窗口得命令行目錄轉到指定項目位置，然后在命令行中運行命令?vue init webpack first_vue?，注意項目名不能有大寫，可以有下劃線，如下會讓用戶輸入幾個基本的配置選項，如項目名稱、項目描述、作者信息，還有默認安裝vue-route路由（建議安裝）、ESLint編碼檢測工具（不建議安裝）、 unit test 和 e2e test測試等，全部安成表示創建項目創建成功

可以運行“ vue -V ” 檢查是否安裝成功

下面介紹vue-cli生成文件目錄及作用，如下

? ? ?build：最終發布的代碼的存放位置。

? ? ?config：配置路徑、端口號等一些信息，剛開始學習的時候選擇默認配置。

? ? ?node_modules：npm 加載的項目依賴模塊。

? ? ?src：這里是我們開發的主要目錄，基本上要做的事情都在這個目錄里面，里面包含了幾個目錄及文件：

? ? ? ? ? ? ?assets:放置一些圖片，如logo等

? ? ? ? ? ? ?components:目錄里放的是一個組件文件，可以不用。

? ? ? ? ? ? ?App.vue：項目入口文件，我們也可以將組件寫這里，而不使用components目錄。

? ? ? ? ?? main.js ：項目的核心文件

? ? ?static：靜態資源目錄，如圖片、字體等。

? ? ?test：初始測試目錄，可刪除

? ? ? .XXXX文件：配置文件。

? ? ?index.html：首頁入口文件，可以添加一些meta信息或者同統計代碼啥的。

? ? ?package.json：項目配置文件。

? ? ?README.md：項目的說明文件。

?

這就是整個項目的目錄結構，其中，我們主要在src目錄中做修改。這個項目現在還只是一個結構框架，整個項目需要的依賴資源都還沒有安裝,，項目依賴資源包安裝在node_modules中。

項目運行測試：首先將命令行目錄轉到指定vue項目文件內，然后命令行中運行命令?npm run dev 運行項目，運行成功會在瀏覽器頁面生成vue得logo

注意：如果運行“ npm install -g vue-cli” 報錯 “npm warn deprecated coffee-script....”,可以使用cnpm淘寶鏡像安裝vue-cli腳手架

?

如果項目運行后命令行報錯：npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed.

可以按照要求運行命令?npm install?ajv@^6.9.1??

?

?

?

參考網址：https://www.cnblogs.com/zhouyu2017/p/6485265.html

https://blog.csdn.net/m0_37479246/article/details/78836686

總結

以上是生活随笔為你收集整理的vue-cli搭建和“Cannot find module npm-cli.js” 、“operation not permitted” 、 deprecated coffee-script等错误的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。