這次帶給大家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="//m.sbmmt.com/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中文網其它相關文章!
推薦閱讀:
#以上是vue-cli+webpack怎樣搭建vue開發環境的詳細內容。更多資訊請關注PHP中文網其他相關文章!