1、基本配置

(1)安裝Vue

如果希望在專案中使用 Vue.js，那麼必然需要對其有依賴，所以需要先進行安裝：

npm install vue@2.5.21 -S

(2)在 main.js 中引入 vue，建立 vue 例項

// 引用 vue
import Vue from 'vue'
// 建立 vue 例項
const vue = new Vue({
  el:'#app',
  data:{
    message:'hello'
  }
})

(3)在 index.html 中掛載 vue 例項

<div id="app">
  <h3>{{message}}</h3>
 

</div>

修改完成後，重新打包，執行程式， 發現打包過程沒有任何錯誤，但是執行程式，沒有出現想要的效果，

這是因為目前我們使用的 Vue 版本為：runtime-only，這裡需要修改為：runtime-compiler

修改方法就是在 webpack.config.js 中新增如下程式碼：

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

修改後，再進行打包，就有效果了；

(4)、el 和 template 的區別

在之前的 vue 程式碼中，不管是想讓 data 中的資料顯示在介面中還是想修改自定義元件，都必須修改 index.html ，但有時候，

我們並不希望手動的來頻繁修改，這時可以定義 template 屬性；

先將 index.html 中掛載的 vue 程式碼進行修改（註釋掉要顯示的資料，只保留一個基本的 id 為 div 的元素）：

在 vue 例項中定義一個 template 屬性：

修改之後，再次打包執行，發現顯示的是template定義的內容；

el 和 template 模板的關係是什麼呢？

在之前的學習中，我們知道 el 用於指定 Vue 要管理的 DOM，可以幫助解析其中的指令、事件監聽等，而如果 Vue例項中同時指定了 template，

那麼 template 模板的內容會替換掉掛載的對應 el 的模板；

這樣的好處是在以後的開發中，當我們再次操作 index.html 時，只需要在 template 中寫入對應的標籤即可；

還可以將 template 模板中的內容進行抽離，分成 template、script、style 三部分書寫，使結構變得更加清晰；

2、Vue元件化開發

(1)

為了採用元件化的形式進行開發，可以將 vue 例項中的 template 和 data 抽離出來：

const App = {
  template: `
    <div>
      <h3>template!!</h3>
    </div>
  `,
  data: {
    message: 'hello'
  }
}

// 建立 vue 例項
new Vue({
    el: '#app',
    template: '<App/>',
    components: {
        App
    }
})

此時，打包執行的結果與之前一樣；

但著元件的增加，main.js 檔案會變得越來越臃腫，於是我們可以將這段程式碼單獨抽取出來，放到一個 js 檔案中；

在 src 資料夾中新建一個資料夾 vue，再在 vue 資料夾中新建一個 app.js 檔案：

將上面抽離出來的程式碼放入 app.js 中，再將其匯出：

export default {
  template: `
    <div>
      <h3>template!!</h3>
    </div>
  `,
  data: {
    message: 'hello'
  }
}

然後只需要在 main.js 中引用一下就行了：

此時，再打包執行，也能實現之前的效果；

但是一個元件以一個 js 物件的形式進行組織和使用的時候是非常不方便的：

• 編寫template模組非常的麻煩
• 如果有樣式的話，不知道寫在哪裡比較合適

於是，我們可以以一種全新的方式來組織一個 vue 的元件：.vue 檔案

(2)、 .vue檔案封裝處理

安裝 vue-loader 和 vue-template-compiler：

#注意：vue-template-compiler的版本要和vue的版本一致，不然會報錯，如果報錯了，把兩者的版本安裝一致即可；
npm install [email protected] [email protected] --save-dev

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

{
  test: /\.vue$/,
    use: ['vue-loader']
}

在 vue 資料夾中新建 App.vue 檔案：

<template>
  <div id="app">
    <h3 class="title">{{name}}</h3>
    <p>{{message}}</p>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data(){
      return{
        name:'小鳴',
        message: 'hello!'
      }
    }
  }
</script>
<style scoped>
  .title{
    color: pink
  }
</style>

打包執行，就會看到效果；

以上我們就把內容寫到了vue檔案中，但是程式碼量多了的話，App.vue同樣會越來越大，我們還可以再把一些內容抽離出來，放到其他的.vue檔案中，

然後在App.vue中匯入一下，就可使用；

比如，在vue目錄下再寫一個Cpn.vue檔案：

<template>
  <div>
    <h3>{{name}}</h3>
  </div>
</template>

<script>
  export default {
    name: "Cpn",
    data() {
      return{
        name:'小鳴www',
      }
    }
  }
</script>

<style scoped>

</style>

然後在App.vue中匯入並註冊：

<template>
  <div id="app">
    <h3 class="title">{{name}}</h3>
    <p>{{message}}</p>

    <!--使用Cpn元件-->
    <Cpn/>
  </div>
</template>

<script>
  //匯入Cpn
  import Cpn from "./Cpn.vue";

  export default {
    name: 'App',
    //註冊Cpn
    components: {
      Cpn
    },
    data() {
      return{
        name:'小鳴',
        message: 'hello!'
      }
    }
  }
</script>
<style scoped>
  .title{
    color: pink
  }
</style>

重新打包，即可顯示Cpn組建的內容；

我們在App.vue中匯入Cpn元件時，需要寫為Cpn.vue ，如何能省略副檔名呢？

要在webpack.config.js 中配置：