在正式開始學習Vue的知識之前，我們需要先對Vue的整體有一個大致的瞭解。為了達到這個目的，我們需要先了解以下內容。

1、Vue對移動端和瀏覽器版本的支援
2、如何初始化一個Vue的專案
3、Vue的程式碼結構

Vue對移動端和瀏覽器版本的支援

因為Vue本身使用了ECMAScript 5 特性，所以Vue支援所有相容ECMAScript 5 的瀏覽器。我們根據下面的圖示來解釋一下，資料來自-caniuse.com。

紅色表示為幾乎不支援
黃色表示為大部分支援 （有很小的可能會影響使用）
綠色表示為幾乎全部支援（不影響使用）

由上面的圖示可以看出來對IE來說，在IE8及其以下的時候，是不支援ECMAScript 5 的，也就是說，是無法使用Vue的。我們看一下對IE8的描述。

IE8幾乎沒有ES5支援，僅支援對字串的Object.defineProperty，Object.getOwnPropertyDescriptor，JSON解析和屬性訪問

所以說對使用了ECMAScript 5 特性的Vue來說，是沒有辦法在IE8及以下使用的。IE8作為天坑的分界線，其實是一直被大家所詬病的，那麼IE9呢？ 我們從圖示中可以看出，IE9的背景為黃色，也就是說大部分支援。那麼不支援的部分是哪些呢？ 我們來看一下。

我們可以看到，對IE9來說，它不支援 嚴格模式 。這對我們使用Vue的影響就已經很小了。所以說我們可以在IE9及以上可以安全的使用Vue。

而對於其他的瀏覽器和移動端來說，對ECMAScript 5的支援還是非常不錯的。chrome和Firefox都對ECMAScript 5早早的提供了支援。而IOS6和Android4.4以上也都對ECMAScript 5的支援非常完善了，也就是說我們可以在這些瀏覽器上面放心的使用Vue。

如果大家對這些資料比較感興趣，也可以點選這裡，自己來看一下。我們這裡就不在過度贅述了。

如何初始化一個Vue的專案

然後我們來看一下，我們應該如何去初始化一個Vue的專案。

引入Vue的方式主要用兩種：

1、直接通過 <script> 標籤引入
2、通過NPM的方式引入

我們分別看一下這兩種引入方式應該如何去做，然後再去把它們做一些對比。

我們先來看一下第一種，我們如何通過 <script>標籤來引入Vue。

1、通過 <script>標籤引入Vue

目前Vue最新的穩定版本為2.5.16，我們可以直接把Vue編譯之後的程式碼下載到我們的本地，然後在我們本地通過<script>標籤引入，也可以直接通過cdn的方式來引入Vue。具體方法如下：

// 開發版本，包含完整的警告和除錯模式。
// 下載地址：https://vuejs.org/js/vue.js
    <script src="vue.js"></script> 

    // 生產版本，刪除了警告，30.90KB min+gzip。
    // 下載地址：https://vuejs.org/js/vue.min.js
    <script src="vue.min.js"></script> 


    // CDN引入方式，版本號為2.5.16。
    // 你也可以直接通過 https://cdn.jsdelivr.net/npm/vue/ 這個地址來檢視Vue的原始碼
    // 如果你想要引入生產版本的話，那麼只需要把最後的vue.js改為vue.min.js
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

我們通過這種方式來引入我們的Vue，然後就可以在.js檔案或者.vue檔案（需要對.vue檔案進行解析，比如使用vue-loader）中直接使用Vue的語法了。

2、通過NPM的方式引入

第二種方式為通過NPM來直接引入。對於NPM，大家如果有過前端開發經驗的話，那麼應該都已經不陌生了。NPM作為在前端被廣泛使用的包管理工具，Vue自然也是需要提供支援的。我們可以直接使用

npm install vue

來去安裝Vue的最新版本。

3、兩種方式的對比

Vue的官網推薦我們在使用Vue去構建大型專案的時候，使用NPM的方式來去安裝。但是說的卻並不是很詳細。我們先來看一下官網的說法

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模組打包器配合使用。同時 Vue 也提供配套工具來開發單檔案元件。

我們把官網的意思進行一下解釋：上面的意思說，我們之所以推薦使用NPM的方式來安裝Vue。是因為：

1、使用NPM的方式可以更好的配合模組打包器（webpack或者Browserify）
2、可以更方便的使用單檔案元件（.vue檔案）

上面兩點就是推薦使用NPM方式的原因。關於模組打包器（Webpack）和單檔案元件（.vue檔案），我們會在後面的章節去給大家詳細講解，如果大家現在就想對Webpack或者單檔案元件進行詳細瞭解，也可以點選連結到它們的官網來詳細瞭解。我們在這裡只去大概的說一下，目的是讓大家更清楚的瞭解Vue引入方式的區別。

我們一般在去使用Vue來構建大型專案的時候，通常會通過npm + vue-cli + webpack的方式來去進行專案初始化。

1、我們需要安裝好npm，可以直接在https://nodejs.org/zh-cn/，這裡下載最新的node版本。
2、然後我們使用：npm install -g vue-cli 指令來去下載最新的vue-cli
3、然後我們通過vue init <template-name> <project-name>這種方式來去初始化我們的專案，<template-name>為我們使用的模組打包器，<project-name>為我們的專案名稱，比如我們可以通過 vue init webpack my-project 來去通過webpack構建一個名字叫做my-project的專案。

一路回車之後，我們就可以得到一個使用npm + vue-cli + webpack構建出的專案了，我們看一下專案的結構

├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── src
├── static
└── test

我們在package.json檔案下，可以看到一個dependencies:{"vue": "版本號"}，這個vue就是我們通過NPM來引入的Vue。在我們的src資料夾下面也已經生成了.vue的單檔案元件。

我們可以直接通過npm run dev的方式來去本地執行這個專案，也可以通過npm run build來去對這個專案進行打包。

那麼是不是通過npm + vue-cli + webpack方式來生成的專案就不能通過<script>標籤的形式來去引入vue了呢？顯示不是的。

我們通過NPM引入的vue，在我們專案執行打包的時候，會被打包到我們的可執行檔案之中，在我們通過瀏覽器去訪問我們的專案的時候，瀏覽器就會訪問我們專案所部署的伺服器中的vue檔案。而如果我們的伺服器的頻寬並不高的話（特別是一些個人的伺服器，經常只有1M的頻寬）。這個時候我們就要儘量的避免我們伺服器中的流量流出。

在這種情況之下，我們去使用<script>標籤的形式在CDN中去引入vue，不失為是一個好的選擇，比如我們可以在專案的 index.html檔案中，通過<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 這種方式來去引入vue，從而儘量減少我們伺服器的壓力。

就像我們在導讀中說的：我們選擇什麼樣的工具，取決於我們面對了什麼樣的問題。沒有任何一種工具或者方式是在任何一種情況下都完全適用的。

Vue的程式碼結構

我們在使用Vue來開發專案的時候，我們的程式碼一般會寫到兩種檔案之中，他們分別是：

1、非單檔案元件(.js檔案)
2、單檔案元件(.vue檔案)

那麼我們通過這兩種檔案來看一下，我們的Vue的程式碼結構是什麼樣子的。

1、非單檔案元件(.js檔案)

非單檔案元件就是我們正常的js檔案，大家知道js檔案是可以直接被瀏覽器解析的。我們可以在js檔案中，直接通過

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


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

（可以直接新建一個html檔案，通過<script>標籤的形式引入Vue，然後複製上面的程式碼，看一下執行的效果）這種方式來去直接生成一個Vue物件，其中的el為element的簡寫，#app表示id為app的div標籤，意思為id為app的<div>標籤中的所有html內容都將被Vue解析。而data物件則是我們在Vue中生成的資料集，當我們去修改message的內容的時候，我們div中展示的資料也會隨之改變。

大家還記得我們在導讀中說過的MVVM模型嗎？在這一塊程式碼中

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

就是我們的View

data: {
    message: 'Hello Vue!'
  }

就是我們的model。

而Vue框架，就是我們的ViewModel，Vue連線了我們的檢視和我們的資料，當我們的資料發生改變的時候，我們檢視中展示的資料也會發生改變。這種方式在Vue中被稱作宣告式渲染。

而其他的一些宣告也都會被寫入到我們的Vue物件之中，比如說：如果我們要在Vue中去定義以下方法，那麼則需要使用到methods宣告。如下：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
      methodsName: function (event) {
          ...
      }
  }
});

同樣的如果我們要監聽Vue的宣告週期或者計算屬性的話，也同樣以這種方式來宣告即可。我們會在講解到這些這些內容的時候，來去給大家詳細解釋。

2、單檔案元件(.vue檔案)

第二種方式，也就是通過我們的單檔案元件的方式來去使用我們的Vue。這也是官網所推崇的一種方式。大家可以想一下，如果我們的專案足夠複雜，那麼我們通過上面的方式來去使用Vue，那麼我們的js檔案得多大啊，同樣也非常不利於以後我們的程式碼維護。那麼我們在以前構建專案的時候遇到這種問題，我們一般想到的處理方式是什麼？相信大家如果使用過jQuery來開發過完整專案的話，都應該能夠想到，那就是模組化，比如我們常用的：AMD、CMD或者ES6 Module的模組化。那麼在Vue中的這種模組化方式，我們稱它為單檔案元件(.vue檔案)。

我們先來看一下單檔案元件(.vue檔案)的檔案結構。

<template>
     // html
</template>

<script>
    // js
</script>

<style>
    // css
</style>

每一個.vue檔案都會被當成使一個“元件”，每個“元件”中都有其單獨的html、css、js。然後我們再把這些“元件”拼裝成一個完整的專案（如果大家對這一塊不瞭解，可以去看一下我們在導讀中提到的元件化知識）。

使用這種單檔案元件(.vue檔案)的優勢非常明顯，它使得我們的專案元件化，因為每個模組的功能都被單獨分割，所以我們的程式碼耦合性
變得更低，也更利於團隊開發和日後維護。（我們會在專案實戰中實地展示這種方式的優勢）

但是我們知道.vue檔案瀏覽器是無法直接解析的，那麼我們就需要使用到一些解析工具把.vue檔案解析成瀏覽器能夠看懂的html、css和js檔案。幹這個事的工具一般為vue-loader（就好像我們去解析.less檔案的Koala，不同的是vue-loader並不是一個單獨的應用），而我們去使用vue-loader也都會配合webpack來去使用，這也是為什麼我們構建正式大型專案的時候，一般都會使用npm + vue-cli + webpack方式的原因之一。

然後我們來看一下，我們在剛才通過npm + vue-cli + webpack來生成的my-project專案。我們通過這個專案來大體的認識一下單檔案元件(.vue檔案)。

我們分別開啟/src/App.vue和/src/main.js這兩個檔案，為了防止過多的程式碼對大家造成困擾，我把這些程式碼進行了一些簡化。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: 'Hello Vue'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

大家可以把這兩部分的程式碼複製到你們的專案中，然後執行npm run dev，通過瀏覽器開啟http://localhost:8080/#/ 可以看到一個Vue的圖示和“Hello Vue”的一串文字。

如果大家可以正常執行，那麼我們來看一下這些程式碼的具體含義。

在main.js裡面它通過es6的方式引入了vue和App.vue兩個檔案，然後在初始化Vue的時候，通過el指定最外層的div為id為app的<div>，然後指定了App.vue作為Vue的一個元件components，並且給他指定了模板template為<App/>。

然後在我們的App.vue中，它在<template>標籤中，聲明瞭我們的html，在<script>標籤中，指定了我們的資料data為{message : 'Hello Vue'}，在<style>中聲明瞭我們的樣式，這就生成了一個完整的元件，然後把這個元件通過es6 module的方式注入到main.js的components中。這樣的一個迴圈的過程，就構成了我們的模組化方針。

從下一章開始，我們就會正式進入Vue的學習，我們會依照這個腦圖的順序

~ 在基礎語法部分，我們會通過html+<script>的形式來引入Vue，致力於通過最簡單直接的方式，能夠讓大家對Vue的常用API有一個足夠的瞭解
~ 在周邊生態部分，我們會通過各種例項，來幫助大家去學習Vue的周邊生態
~ 最後我們會通過npm + vue-cli + webpack的方式，通過一個實戰專案來讓大家把我們本課程所學到的所有內容都整合起來。

新課程《深入淺出學Vue開發》以上線GitChat，歡迎大家購買，部落格只會上傳部分章節。