vue環境安裝+基本設置,網友:這麼詳細的教程收藏了備用

第一步、安裝node.js環境

下載地址:

http://nodejs.cn/


vue環境安裝+基本設置,網友:這麼詳細的教程收藏了備用

這裡可以看到它有兩個版本我們選擇使用LTS版本,也就是長期支持版本比較穩定

第二步、更改npm包管理時的global以及緩存的位置

安裝好之後,對npm安裝的全局模塊所在路徑以及緩存所在路徑,進行配置。

是因為以後執行類似:npm install express [-g](後面的可選參數-g,g代表global全局安裝的意思)的安裝語句時,會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中,佔C盤空間。

例如:小編希望將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中,這裡小編的安裝文件夾是這個【D:\nodejs】你們自己的依據自己的真實路徑來,在【D:\nodejs】下

創建兩個文件夾【node_global】及【node_cache】

vue環境安裝+基本設置,網友:這麼詳細的教程收藏了備用

創建好了之後在CMD中運行以下命令:(更改npm安裝路徑)

<code>//先運行這個
npm config set prefix "D:\nodejs\node_global"

//再運行
npm config set cache "D:\nodejs\node_cache"/<code>


vue環境安裝+基本設置,網友:這麼詳細的教程收藏了備用


第三步、我們在下載一個cnpm

以上命令執行完畢後接下來我們下載cnpm

因為npm安裝插件是從國外服務器下載,受網絡影響大,可能出現異常,

如果npm的服務器在中國就好了,所以我們的淘寶團隊幹了這事!

來自官網:“這是一個完整的npmjs.org鏡像,你可以用此代替官方版本(只讀),同步頻率目前為10分鐘一次以保證儘量與官方服務同步。”

安裝:

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

完成後 輸入 cnpm-v,可以查看當前cnpm的版本

好了,到了這裡node就暫時告一段落了。接下來安裝vue-cli

先確認是否安裝過,如果有可以通過:

<code>npm uninstall vue-cli -g  //進行卸載/<code>

上面我們安裝了cnpm所以我們安裝vue-cli當然使用cnpm了

<code>cnpm install -g @vue/cli    // 進行腳手架的安裝/<code>

或者有些有條件的小夥伴可以從國外的服務器來安裝

直接通過國外的npm安裝

<code>npm install -g @vue/cli 
//或者 
yarn global add @vue/cli/<code>

安裝好了之後可以通過指令:vue -V 查看腳手架是否安裝成功(注意-v大寫)

<code>vue -V /<code>


vue環境安裝+基本設置,網友:這麼詳細的教程收藏了備用

第四步:通過腳手架創建項目

<code>vue create //項目名稱/<code>

第五步、運行項目:

輸入

<code>npm run serve //運行,通過瀏覽器訪問local地址。/<code>


vue環境安裝+基本設置,網友:這麼詳細的教程收藏了備用

第六步、編譯項目:

切換到項目文件夾下運行以下命令

<code>cnpm run build
/<code>


vue環境安裝+基本設置,網友:這麼詳細的教程收藏了備用

好了,到了環境的安裝配置以及運行項目就完了,小夥伴們有什麼疑問歡迎在下方評論區提問哦


分享到:


相關文章: