搭建vue開發環境步驟

2022-07-20 05:45:12 字數 1704 閱讀 8915

相信很多人在剛開始學習vue這個框架的時候,在最開始搭建開發環境的時候,都會遇到一些大大小小的坑,我之前在學習

的時候搭建過一次,過了乙個月後在搭建第二次的時候,竟然有一些混亂,所以今天想整理出來;

vue現在在前端,相對於算是現在前端工程師都比較常用的框架之一

node.js

,,vue

的執行是要依賴於

node

的npm

的管理工具來實現,

node

32還是

管理工具,先看看

node

安裝成功了沒有,輸入

node -v

,回車,會輸出

node

的版本號,

這樣就已經是安裝成功了,由於在國內使用npm是非常慢的,所以在這裡我們推薦使用**

npm映象,使用

**的cnpm命令管理工具可以代替預設的

npm管理工具:

$ npm install -g cnpm --registry=

;(當然也可以不用安裝**映象)

三:**映象安裝成功之後,我們就可以全域性vue-cli腳手架,輸入命令:

cnpm install --global vue-cli (簡寫

cnpm install -g vue-cli

) 回車;驗證是否安裝成功,在命令輸入

vue,出來

vue的資訊,及說明安裝成功;

四:搭建完手腳架之後,我們要開始建乙個新專案,這個時候我建議,盡量不要裝在c盤,因為

vued

:回車就可以直接改盤,

然後我們開始建立新的專案輸入命令:vue init webpack my-project  回車,

my-project

是我自己的資料夾的名字,是基於

webpack

的專案,輸入之後就一直回車,直到出現是否要安裝

vue-route

,這個我們在專案要用到,所以就輸入y 回車

下面會出現是否需要js語法檢測,這個我們暫時用不到,就可以直接輸入

no,後面的都可以直接輸入

no,都是我們暫時用不到的

輸入命令:cnpm install

8080是預設的埠,要訪問的話,直接在瀏覽器輸入

localhost:8080

就可以開啟預設的模板了;

搭建vue開發環境的步驟

有的小夥伴最開始搭建vue之後,再次搭建就發覺有點忘了。這次總結一下流程 映象安裝成功之後,我們就可以全域性vue cli腳手架,輸入命令 cnpm install global vue cli回車 驗證是否安裝成功,在命令輸入vue,出來vue的資訊,及說明安裝成功 搭建完手腳架之後,我們就可以要...

搭建vue開發環境的步驟

vue的執行是要依賴於node的npm的管理工具來實現,這裡就不說怎麼安裝了,直接進入下一步。由於在國內使用npm是非常慢的,所以在這裡我們推薦使用 npm映象,使用 的cnpm命令管理工具可以代替預設的npm管理工具 npm install g cnpm registry 三 映象安裝成功之後,我...

搭建vue開發環境的步驟

vue現在在前端,相對於算是現在前端工程師都比較常用的框架之一,他和angular有一些相似之處,所以用過angular的夥伴們,再來學習vue應該不會感覺太難 這樣就已經是安裝成功了,由於在國內使用npm是非常慢的,所以在這裡我們推薦使用 npm映象,使用 的cnpm命令管理工具可以代替預設的np...