前言：重裝nodejs后，?vue-cli搭建項(xiàng)目后運(yùn)行vue項(xiàng)目報(bào)錯(cuò)報(bào)錯(cuò) "npm Error: Cannot find module npm-cli.js"?，同時(shí)發(fā)現(xiàn)npm?-v 也報(bào)錯(cuò)。

分析:? vue-cli腳手架模板是基于node下的npm來完成安裝的，安裝vue-cli也會(huì)先安裝node；因?yàn)椤皀pm -v”命令報(bào)錯(cuò)，這里重裝nodejs，一步步到npm安裝全局依賴包。

?

NODEJS安裝

Nodejs下載網(wǎng)址：https://nodejs.org/en/download/。

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

?

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

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

?

操作流程：

在node.js安裝的文件夾中創(chuàng)建兩個(gè)文件夾【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"；

? ? ? ? ? ?

?

然后，在進(jìn)入環(huán)境變量對(duì)話框，在【系統(tǒng)變量】下新建【NODE_PATH】，輸入【C:\Program Files\nodejs\node_global】，將【用戶變量】下的【Path】修改為【"C:\Program Files\nodejs\node_cache】

?

最后測(cè)試：npm install express -g ,安裝成功的話會(huì)在node_global看到express包

? ? ? ? ? ?

?

?

坑：全局安裝express測(cè)試錯(cuò)誤如下

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

?

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

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

?

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

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

?

?

CNPM：淘寶npm鏡像

??到目前為止，node的環(huán)境已經(jīng)安裝完成，npm 包管理器也有了，由于有些npm資源被屏蔽或者是國外資源的原因，經(jīng)常會(huì)導(dǎo)致npm安裝依賴包的時(shí)候失敗，所以我們還需要npm的國內(nèi)鏡像----cnpm.

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

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

?

?

Vue-cli?腳手架構(gòu)建項(xiàng)目

安裝vue-cli 腳手架構(gòu)建工具，在命令行中運(yùn)行命令?cnpm install -g vue-cli；

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

可以運(yùn)行“ vue -V ” 檢查是否安裝成功

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

? ? ?build：最終發(fā)布的代碼的存放位置。

? ? ?config：配置路徑、端口號(hào)等一些信息，剛開始學(xué)習(xí)的時(shí)候選擇默認(rèn)配置。

? ? ?node_modules：npm 加載的項(xiàng)目依賴模塊。

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

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

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

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

? ? ? ? ?? main.js ：項(xiàng)目的核心文件

? ? ?static：靜態(tài)資源目錄，如圖片、字體等。

? ? ?test：初始測(cè)試目錄，可刪除

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

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

? ? ?package.json：項(xiàng)目配置文件。

? ? ?README.md：項(xiàng)目的說明文件。

?

這就是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)，其中，我們主要在src目錄中做修改。這個(gè)項(xiàng)目現(xiàn)在還只是一個(gè)結(jié)構(gòu)框架，整個(gè)項(xiàng)目需要的依賴資源都還沒有安裝,，項(xiàng)目依賴資源包安裝在node_modules中。

項(xiàng)目運(yùn)行測(cè)試：首先將命令行目錄轉(zhuǎn)到指定vue項(xiàng)目文件內(nèi)，然后命令行中運(yùn)行命令?npm run dev 運(yùn)行項(xiàng)目，運(yùn)行成功會(huì)在瀏覽器頁面生成vue得logo

注意：如果運(yùn)行“ npm install -g vue-cli” 報(bào)錯(cuò) “npm warn deprecated coffee-script....”,可以使用cnpm淘寶鏡像安裝vue-cli腳手架

?

如果項(xiàng)目運(yùn)行后命令行報(bào)錯(cuò)：npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed.

可以按照要求運(yùn)行命令?npm install?ajv@^6.9.1??

?

?

?

參考網(wǎng)址：https://www.cnblogs.com/zhouyu2017/p/6485265.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。