如何使用vue-cli+webpack搭建vue開發環境

這篇文章主要介紹了如何使用vue-cli+webpack搭建vue開發環境，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在這里我們需要首先下載node，因為我們要用到npm包下載，是基于node的

下載node，同時需要下載git，以后我們就在git上輸入命令來搭建我們的vue環境

git用的是linux命令

不要問為什么，能用就行，你說是不是？

windows系統，下載完git以后我們再桌面右擊鼠標會看到git Bash，點開它，然后就打開了git，

git有很多功能，同時git可以往github上push你的文件，github是一個很不錯的倉庫管理工具哦

好，我們直接開始，打開git之后會顯示

然后我們執行npm install webpack

就會自動下載webpack最新版本了

在這里我們直接進入正題，怎么使用vue-cli搭建vue的開發環境

在這里我們需要全局安裝vue-cli

在git里執行npm install vue-cli -g  安裝vue命令環境

執行vue --verson查看是否安裝成功，

顯示vue的版本，就是安裝成功了

這樣就是全局安裝了

現在我們再命令行輸入vue init webpack-simple<模板名，就是你的項目的名稱>，

在這里我們用webpack-simple搭建，因為他沒有嚴格的規范，相對于大多數程序員來說比較好，他與webpack的區別在這里我就不細說了，如果需要的話大家可以在下面留言，我們給大家分享

在這里我的項目名稱為myvue

所以我執行vue init webpack-simple myvue

桌面會有一個myvue的文件夾

我們執行cd myvue進入到我們的項目下

會發現文件夾下會有這些文件，這就是vue-cli自動為我們搭建的環境了

我們執行npm install

這時候我們需要等待一小會，npm在為我們下載基于node的一些文件，

然后你會發現多了一個node——modules文件，里面是node的一些模塊

然后我們再命令行執行npm run dev

vue自動打開了瀏覽器，運行了此vue項目

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用vue-cli+webpack搭建vue開發環境”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!