1. 程式人生 > >vue,一路走來(1)

vue,一路走來(1)

查看系統 ima admin 註冊表 pack 國內 npm 感謝 構建

2016年12月--2017年5月,接觸前端框架vue,一路走來,今天才覺得有必要把遇到的問題記錄下來。

那時,vux用的是1.0的vue,然而vue2.0已經出來了,於是我結合了mint-ui一起來做項目,其實還有一個原因是網上大部分學習的資料視頻都是以餓了麽框架來演示的。同時很感謝認識的以及不認識的小夥伴為我解決項目中遇到的問題。

用webpack構建vue項目

1.需要安裝node環境。(直接網上找下載就好)

2.在你想要新建項目的路徑下新建文件夾,用於存放項目文件,然後shift+右鍵,選擇‘在此處打開命令窗口’,按以下命令操作

技術分享

本人建議將 npm 的註冊表源設置為國內的鏡像(淘寶鏡像 cnpm),可以大幅提升安裝速度。

技術分享

在建立項目的過程中,有進行選擇的選項,可以選擇Y或者N,這根據自己需要所選,不影響什麽,但紅色框內的對ES6和ESLint不是很熟的話我個人不建議你應用它,因為要求比較嚴格,所以一不小心就報錯,導致整個項目運行不起來,對於初學很痛苦。

技術分享

安裝vue的時候遇到的問題(其實是朋友遇到的問題,最後解決了,分享一下)

執行$ npm install --global vue-cli這一步的時候出現以下問題:

技術分享

解決:

1. 查看系統環境變量:鼠標右鍵單擊我的電腦→屬性→高級系統設置→環境變量→在系統變量下新建NODE_PATH並輸入“E:\nodejs\node_global\node_modules”( “E:\nodejs\node_global\node_modules” 這個是你安裝node的路徑,我的是安裝在e盤)

2. 打開這個目錄 C:\Users\Administrator\AppData\Roaming\npm 查看文件中是否有

技術分享

這幾個文件,如果沒有,可以嘗試去你原來安裝node的盤裏找

我的node是安裝在E盤

技術分享

然後將

技術分享

這些文件復制到C:\Users\Administrator\AppData\Roaming\npm 中,再將

技術分享

這個文件夾中的vue-cli復制到C:\Users\Administrator\AppData\Roaming\npm\node_modules

然後啟動cmd,輸入vue –V,就可以看到一下結果了

技術分享

vue,一路走來(1)