Windows10 下安裝Vue以及遇到的一些問題

Vue安裝

Vue是國內開發的一種前端框架,在國內應用非常廣泛,本人最近在學一些前端框架相關的東西,於是選擇了vue這個框架,下面與大家分享一下安裝過程中遇到的一些問題以及解決方法。

Node.Js安裝

要安裝Vue,首先必須要安裝node.js(注意:要用node.js安裝Vue,必須要node.js版本在6.0.0及以上才行)。下面附上node.js下載地址:https://nodejs.org/en/
如下圖所示:可以下載右邊的最新版,也可以下載左邊的穩定版本
下載好後一路next傻瓜式安裝,然後配置環境變量就可以了。

Vue安裝

現在安裝的node.js裏面一般自動安裝了npm。安裝好node.js之後進入命令行頁面,快捷鍵Windows+R,輸入cmd回車,如下圖所示:
首先輸入命令:npm install -g cnpm --registry=https://registry.npm.taobao.orgi 選擇淘寶NPM鏡像下載安裝(因爲淘寶NPM鏡像是國產的,下載起來更快,想了解詳情請看 https://npm.taobao.org/ )如下圖所示

然後輸入命令cnpm install -g vue-cli 安裝Vue,如下圖所示:

安裝完成後可以查看vue的相關信息:

安裝時遇到的問題:Node.Js版本過低

如果是之前就已經安裝過node.js的小夥伴安裝Vue時要注意node.js的版本,如果版本過低會出現如下情況:
在這裏插入圖片描述
這時需要我們去更新node.js的版本,node.js下載地址前面已經提供了,下載之後重新安裝,注意安裝目錄要覆蓋之前的安裝目錄,與環境變量中的目錄一致。
安裝好後輸入命令node -v可查看當前的node版本。
由於Windows不支持n模塊,所以只能自己下載新版本並重新安裝,如果電腦支持n模塊的小夥伴可以直接在命令行中通過命令進行更新,這裏就不詳細講了。

項目創建於運行

安裝好Vue之後就可以開始我們的vue之旅了,首先要在命令行中創建一個自己項目:
第一步:確定一個文件夾用於保存自己的項目:我創建了一個名爲VueWorkSpace的文件夾用於保存自己的項目。
在這裏插入圖片描述
第二步:在命令行中cd 進入該文件夾cd D:\WorkSpace\VueWorkSpace
在這裏插入圖片描述
第三步:輸入命令vue init webpack my-vue創建一個項目,其中“my-vue”是自己的項目的名字後面也可以指定。在下圖中箭頭所指處可以輸入項目的名字,可以跟命令中的不一樣,以此處爲準。
在這裏插入圖片描述
輸入名稱後回車,也可以不管直接回車,名字就是上面命令中的名字。回車後又會出現下面幾個問題,除了下圖中標註出來的以外都可以自己編輯或者直接回車不管他。
在這裏插入圖片描述
上圖中箭頭指出來的那一項最好選擇N,因爲這一項是選擇檢查代碼以及報錯的,如果選擇Y,那麼在代碼中即使你只敲錯了一個空格,他也會報錯,很難受。創建好後如下圖所示:
在這裏插入圖片描述
第四步:進入自己創建的項目目錄下,運行自己的項目:
輸入命令:cd my-vue進入自己的項目的目錄,其中"my-vue"是自己的項目名。
輸入命令:npm run dev運行自己的項目。
這樣我們創建的項目就運行起了。
在這裏插入圖片描述

安裝Vue中的問題:ChromeDriver不可用

在執行命令 vue init webpack my-vue時可能會出現下面的問題:
在這裏插入圖片描述
顯示ChromeDriver不可用,這時你可以去下載對應版本的Chromedriver並保存到上圖中最後一行指定的目錄中,也可以不管他,因爲命令運行到這裏時如果出現這個問題會在這裏停留幾分鐘,如果不管他,他還是會繼續執行創建項目,並且會報錯,但項目還是能成功創建。如下圖所示:
在這裏插入圖片描述
這時我們通過cd 進入我們創建的項目目錄下,執行命令cnpm install或者npm install安裝依賴,如果創建過程中沒有報錯可以省略這一步。然後執行npm run dev運行項目。

最後

總之我遇到的問題目前就這些,還有其他問題的小夥伴可以去其他地方找找看。
上面提到的創建項目的方法是比較全面的一種,還有另一種創建項目的方法,這種方法創建的項目更簡單一些,項目中的文件也沒有前一個方法的多,在一些輕量級的項目中更爲方便,這種方法的命令是vue init webpack-simple my-vue(my-vue爲項目名)。這種方法比較簡單,而且不用選擇前一種方法中的檢查代碼的那個選項,只要一路回車下來就行了。

發佈了3 篇原創文章 · 獲贊 1 · 訪問量 8256
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章