1、安裝依賴Vue包：cnpm install vue --save

PS：不是安裝開發時依賴，所以不需要加上-dev

預設會安裝最新版本的vue包。

2、使用vue進行開發：在main.js應用vue語言進行開發

// 引用vue

import Vue from 'vue'

// 使用vue

const app = new Vue({

el: '#app',

data: {

message: 'Hello Webpack'

}

})

然後在index.HTML進行引用：

但是在瀏覽器中並未正常顯示：

原因是vue裡面有兩種模式：

1、runtime-only ----> 程式碼中，不可以有任何的template，打包時預設是此情況；

2、runtime-compiler ----> 程式碼中，可以有template，因為有compiler可以用於編譯template。

所以webpack進行配置指定compiler 版本（預設是引用vue.runtime.esm.js）：

然後重新打包程式碼，執行成功：

el與template的區別：

一般情況下，vue是做單頁面開發的，即為SPA（simple page web application），也就是說一個工程裡面只有一個index.html檔案，當然也可以多頁面，就是通過vue-router路由進行多頁面開發。

所以我們在開發的過程中，我們一般不去修改index.html這個檔案，只是在這檔案引用一下app即可，至於app裡面需要展示什麼內容，則在js程式碼中進行實現：

js程式碼中定義一個template的屬性，然後在裡面實現介面需要展示的內容，這時候template的內容會替換掉index中的app的內容：

重新打包執行情況：

PS：可以將Vue例項中template內容抽離出來到一個元件裡面：

然後這個元件物件，又可以進一步抽離出來，集中放在一個vue的程式碼包裡面：

然後在需要用到此App物件的js檔案中匯入此物件即可：

所以，以後需要進行開發或修改app物件的程式碼時，就可以在app.js這裡進行修改就可以了。

當然這個還不是最後抽離，還可以將app.js的內容進一步抽離出為app.vue檔案，這樣就更清晰。後期我們在開發或修改程式碼的時，只對這個檔案進行維護即可：

然後在main.js中匯入此檔案：

當然，用到這個Vue的環境，在打包專案的時，還需要進行環境的配置，否則打包會報錯：

cnpm install vue-loader vue-template-compiler --save-dev 進行安裝：

然後修改webpack.config.js的配置檔案：

{

test: /\\.vue$/,

use: ['vue-loader']

}

但是在打包時，還是發生錯誤：

原因是vue-loader在13版本之後需要安裝一個外掛，所以可以直接把配置檔案修改版本，然後重新安裝修改後的版本：cnpm install ：

最後重新打包，測試執行成功。

PS：文字的顏色變成了綠色，是因為在app.vue檔案中有個樣式，在樣式那邊指定了這個文字的顏色

通過此方法，我們就可以實現元件化開發。例如，在專案中新增一個子元件：

在App.vue中註冊引用子元件Cpn：

重新打包，測試執行：