搭建前端環境及前端開發VUE


 

環境篇

1、安裝Node.js

  官網下載:https://nodejs.org/en/ (選擇LTS那個)

  下載完后,傻瓜式安裝(一直下一步)

  配置環境變量,在path中寫入安裝地址(我的安裝路徑是C:\Program Files\nodejs\),安裝后默認配置好了

  配置npm在安裝全局模塊時的路徑和緩存cache的路徑

因為在執行例如npm install webpack -g等命令全局安裝的時候,默認會將模塊安裝在C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache如下圖所示

 

所以這里配置自定義的全局模塊安裝目錄,在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_modules”,如下圖:

 

 

最后編輯用戶變量里的Path,將相應npm的路徑改為:D:\Program Files\nodejs\node_global,如下:

更改前:

 

 更改后

 

 配置完成

測試下:

在cmd命令下執行 npm install webpack -g 然后安裝成功后可以看到自定義的兩個文件夾已生效:

 

 

2、配置淘寶鏡像

在nodejs目錄下執行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

配置失敗報錯時,

1、刪除用戶目錄下的該文件,如圖

2、執行清理命令:npm cache clean --force

 

 重新執行

 配置taobao倉庫:npm config set registry https://registry.npm.taobao.org

 

pm config list //查看基本配置 

npm config list -l //查看所有配置

 

npm本地安裝與全局安裝有什么區別?

npm install grunt // 本地安裝,則是將模塊下載到當前命令行所在目錄。 

npm install -g grunt//全局安裝,模塊將被下載安裝到【全局目錄】中;

 

npm如何獲取全局安裝的默認目錄?

npm config get prefix

 

npm如何設置全局安裝的默認目錄?

npm config set prefix “directory”

 

3、使用 vue-cli + element-ui 快速搭建項目

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下載官方提供的模板
(本地電腦沒有安裝 git 的可以進入 https://github.com/ElementUI/element-starter ,點擊綠色的 Clone or download 按鈕,點擊 Download ZIP 下載模板)

② 在項目根目錄下使用cnpm intsall下載依賴的模塊(沒有淘寶鏡像 cnpm 可以使用npm install

③ 在項目根目錄下使用npm run dev跑項目 

 

 

 

 

  

pm config list //查看基本配置 
npm config list -l //查看所有配置

npm本地安裝與全局安裝有什么區別?

npm install grunt // 本地安裝,則是將模塊下載到當前命令行所在目錄。 
npm install -g grunt//全局安裝,模塊將被下載安裝到【全局目錄】中;

npm如何獲取全局安裝的默認目錄?

npm config get prefix

npm如何設置全局安裝的默認目錄?

npm config set prefix “directory”


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM