由於vue相對來說比較平緩的學習過程和新穎的技術思路,使其受到了廣大前後端開發者的青睞,同時其通俗易懂的API和數據綁定的功能也為其攬獲了不少用戶。本文主要講解vue專案的建構與實戰,因此不會太多涉及其API和語法部分,旨在幫助vue的入門級使用者了解從零開始建立vue專案的步驟和方法。
首先,在建立vue專案之前我們需要了解vue專案的分類,這裡我主要將其分為兩類:(1)直接引入vue.js檔案(2)使用vue單一檔案元件
以以上兩類來看,直接引入vue.js檔案就像頁面中直接引入jQuery一樣,這樣的專案存在著許多缺陷,只能使用一些基礎的API和限制的功能,一般主要用於初級用戶和小型專案。本文主要講解第二種使用vue但檔案元件建構的vue專案。
建構一個vue專案存在著多種方式,首先我們需要用到對應的建置工具。官方推薦的建置工具主要有webpack和browserify,這裡我更推薦大家使用webpack來建置。同時除了建置工具,我們還需要用到建置方法,例如我們可以使用vue-cli腳手架來自動產生vue專案的基礎目錄文件,當然我們也可以從零開始進行自訂建置。
vue-cli構建
如果你使用vue-cli腳手架來建立vue項目,那麼你只需敲擊下面5行命令即可產生一個簡單的vue項目(前提安裝node .js):
npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
這樣的建置方式其實並不適用於所有項目,很多文件你的專案可能都不會用到,而且如果你對自動產生的文件一無所知,那麼後期維護起來也會非常的吃力。所以這裡不推薦新手使用vue-cli構建,而是推薦大家參考vue-cli產生的檔案從零開始建立vue專案。
自訂構建
相比vue-cli構建,自訂構建就顯得靈活得多,但是它需要你了解構建的步驟和原理,要求也就隨之提高了。自訂建置分為以下幾個步驟:
檔案/資料夾建立
package.json檔案建立
webpack設定檔建立
##package.json檔案建立
webpack設定檔建立
#入口檔案創建
vue元件寫
路由設定
package.json檔案
npm init -y
然後修改其scripts配置項,添加打包壓縮命令,並且增加dependencies依賴項,添加項目相應依賴。
webpack設定檔
###其次我們需要建立我們的webpack設定文件,這裡和建置其他專案不同的是,vue單一檔案元件需要使用vue-loader載入器進行加載,同時使用babel-loader進行ES6語法的轉換######入口檔###這裡我們需要寫在webpack中配置的入口檔案位址的entry.js,主要功能為掛載產生的vue實例app至id為app的DOM節點上
然後我們需要寫一個最簡單的vue元件index.vue,將其放在views資料夾下
本文主要介紹了vue專案建構的兩種方式,vue-cli建置與自訂建置都有其適用的範圍和對象,大家需要針對專案和自身條件的情況進行擇優選擇,同時在自訂建置中也有很多功能配置本文並未提及,感興趣的童鞋可以自己繼續探索。
以上是vue專案建構與實戰實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!