vue入門——通過webpack構建vue項目

簡介:

本篇主要介紹如何通過webpack構建一個簡單的vue項目,不涉及vue的安裝,如果沒有安裝vue的話,請先安裝vue.

在使用vue的時候,通常有兩種方式,一種是在html中引入vue.min.js,利用vue的語法規則進行開發。另一種是通過webpack構建vue工程(不知這樣描述是不是準確),本篇將對該方法展開敘述(前提安裝了vue):

步驟

1、建立項目路徑。首先建立一個項目路徑(我的位於D:\Program Files\vueProject),儘量不要放在c盤,打開命令行窗口,將路徑切換到工作路徑中。

2、輸入vue init webpack demo,建立項目。其中demo使我們要建立的項目名稱,當腳本執行時,會繼續進行確認。如下圖,其中的一些亂碼我也不知道是什麼原因。

接下來就是確認項目描述信息,作者信息,這個根據個人喜好,填寫吧。Vue build選擇默認的,vue-router選擇yes(如果不選擇,則無法使用vue的路由功能,有關路由功能的參考vue路由詳解,個人覺得這塊還是比較重要的)

下面的內容應該是有關js語法檢測的內容,直接輸入n就可以,暫時用不到。然後按enter,直到開始安裝。

出現以下內容,表示已經正確安裝。

根據提示信息,切換到demo目錄下,然後執行npm run dev。編譯並啓動我們的項目

在瀏覽器中輸入訪問的網址,訪問界面表示已經正確配置

至此,項目已經成功構建,在下一篇內容中,我們將對生成的文件進行簡單的說明。

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