vue-cli+webpack怎樣搭建vue開發環境

這次帶給大家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 inst<a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a> 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專案

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS如何實作Ajax的請求函數

#Angular實作表格過濾，刪除功能

#

以上是vue-cli+webpack怎樣搭建vue開發環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！