vue學習總結一:vue-cli構建項目

vue 項目官網推薦新手直接用腳手架ovue-cli來構建項目,這樣可以避免新手去自己手動配置那些複雜的webpack,因爲用vue-cli的話幾乎可以實現零配置。

構建步驟大概如下:

1.執行:

npm install --global vue-cli

執行成功如下:



2.執行:其中'yourprojectname'爲你的項目名稱,可以自定義

vue init webpack [yourprojectname]

執行過程中有一些詢問,如項目名稱,描述,作者等這些可以直接回車默認,其他的詢問是否需要安裝vue-router,一般的項目幾乎都要用到路由,所有選擇yes,其他的eslint語法檢查和單元測試的個人比較排斥,用戶可以根據自己喜愛來選擇yes、or.命令執行成功如下:



3.cd到yourpaojectname項目文件中執行 npm install,耐心等候安裝

cd youprojectname
npm install

執行成功效果如下:



4.用自己最習慣的ide編輯器打開剛剛創建的項目,個人比較推薦webstrom,打開後項目結構如下:



5.用webstrom知道的命令行工具執行:npm run dev


執行成功後,會提示你在瀏覽器打開這個鏈接:‘http://localhost:8080’,然後我們在瀏覽器中打開看看頁面是這個樣子的:



到這裏我們就已經初步完成了有個vue項目的構建,但是要學習vue並且用vue來做項目的話,只會這些還遠遠不夠,接下來我會繼續更新,爲大家簡單的講講vue的知識,從vue生命週期---vue-router---vuex的用法,最後帶着大家寫一個小型的demo.


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章