在正式开始学习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，欢迎大家购买，博客只会上传部分章节。
