vue專案建構與實戰實例教程

由於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檔案

使用下方指令，我們可以快速建立一個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中文網其他相關文章！