1. Vue.js概述

Vue 和 jQuery 一样，都是一个前端框架，它的中心思想就是数据驱动。

像 jQuery 这种老前辈是结构驱动，怎么理解呢？像我们要改变一个元素的值，首先要获取它的结构（ $("#id") ），然后再修改数据（  $("#id").text("改变值") ）

而 Vue 的做法直接就是 this.msg = "改变值" ，然后 msg 就会同步到某个结构上。这种方式就不再是管理 dom 结构了，而是直接操作数据。

2. 搭建环境

2.1 前提

安装 node.js （https://nodejs.org/zh-cn/），在官网下载后，可以直接无脑下一步完成安装，node.js自带了npm，省去了不少麻烦

2.2 安装vue的脚手架

打开cmd，输入

npm install -g vue-cli  // -g 代表全局安装，此时默认安装的为@vue/cli3

2.3 初始化目录

安装完成后，通过cmd进入随便一个目录，比如 project 目录，然后进行初始化操作

vue init webpack myProject

webpack 参数是指 myProject 这个项目将会在开发和完成阶段帮你自动打包代码，比如将js文件统一合成一个文件，将CSS文件统一合并压缩等

注意：初始化过程中会让你给项目自定义一些描述等。根据自己的需求进行设置

2.4 预览demo项目

初始化完成后，根据提示继续输入命令

cd myProject

// vue的早期版本需要进行此操作，安装项目所需要的依赖，若没有提示，可以直接跳过
npm install

// 将项目跑起来
npm run dev

输入完成后，在浏览器输入它提供的网址，就可以看到 Vue 的欢迎页了

注意：开发完成后执行 npm run build 会编译我们的源代码生成最终的发布代码，在 dist 目录下

3. 解析目录结构

初始化后的目录结构如下，我们需要重点关注的是以下文件

build ：里面保存一些 webpack 的初始化配置

config ： 保存一些项目初始化配置

src ： 所有的关键代码都在这里

index.html ： 首页文件

package.json ： 保存一些依赖信息

打开 build 目录中的 webpack.base.conf.js ，会看到如下代码：

说明我们的入口 js 文件在 src 目录中的 main.js

4. 解析代码

Vue的核心架构，主要在于 组件 和 路由 两大模块。参考网上大神的文章，学习开发一个前端组件库，加深对组件和路由的理解。

先来看看最基本的 Vue 生成的默认代码（ src 下的 main.js ）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',                    // 将所有组件放到 id 为 app 的 div 元素中
  router,                        // 使用路由，上面定义的 router
  template: '<App/>',            // 告知页面这个组件用这样的标签来包裹着，并使用它
  components: { App }            // 告知页面要使用 App 这个组件
})

逐行解读：

① import Vue from 'vue'               引入 vue 的依赖，类似于 jquery-min.js

② import App from './App'            引入 App.vue 文件，在 Vue 中引入文件可以直接用 import。 App.vue 是个视图文件，相当于一个容器，然后我们通过编码，往容器里放积木（其他组件或页面），最终构建出我们需要的东西

③ import router from './router'     引入路由配置文件，个人理解，类似于 @RequestMapping

④ 接下来的 new Vue 实例化          相当于js中的init，然后声明 el： #app，意思就是将 所有视图 放在id为app的这个 dom 元素中，components 表明引入的文件，即前面的 App.vue，这个文件的内容将以 <App/> 这样的标签写到 #app 中

                                                        ==》 将 App.vue 放到 #app 中，然后以 <App/> 来指代我们的 #app

接下来，我们分别解析一下两大模块。

5. 单页面组件

然后打开 src 下的 App.vue 文件，在Vue中，官网叫它为组件，单页面的意思是，所有的代码（结构，样式，逻辑）都写在同一个文件中。

当我们引入了这个文件后，就相当于引入了对应的结构、样式和JS代码 （类似于 jsp的 include）

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</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>

node 端之所以能识别 .vue 文件，是因为前面说的 webpack 在编译时，将 .vue 文件中的html，js，css都抽出来合成新的单独的文件。

从代码可以看出来，我们的文件内分为三大部分，分别是 <template> <script> <style>，也就是结构，脚本，样式。

script 就像 node 一样暴露一些接口，可以看到我们的 template 标签中除了一张图片之外，就只有一行代码 <router-view></router-view>

然后回看我们的浏览器，图片是通过 <img> 标签进行展示的，那么下面的文本和链接的代码写在了哪里呢？这就涉及到了 路由

6. 路由

路由的大致概念：传统的 PHP路由 是由服务器端根据一定的 url规则匹配 来返回给前端不同的页面地址，如 xxx.com/about  和  xxx.com/recruit  。这里只有 about 和 recruit ，并没有后缀，这些不带 xxx.html 的地址其实是服务器端经过一层封装指定到某些文件上去。

同样的道理，前端也可以根据带锚点的方式实现简单路由（不需要刷新页面） ： xxx.com/install#mac，其中 #mac 就是我们的锚点路由

注意初始化时，我们在浏览器中打开的地址： http://localhost:8080/#/    路由可以让我们访问诸如 http://localhost:8080/#/about  这些页面时，无需刷新，直接展示

现在我们回到 App.vue 文件中的这行代码： <router-view></router-view>  这句代码在页面中放入一个路由视图容器，当我们访问 http://localhost:8080/#/about/ 的时候就会将 about 的内容放进去，访问  。。。/#/recruit 的时候就将 recruit 的内容放进去

如此看来，无论我们打开  http://localhost:8080/#/ 下的 about 页面，还是 recruit 页面，其中的图片都是公用的，变的只是 路由容器 里面的内容，那么 路由容器的内容 由谁来控制呢？

前面说的 src/main.js 中有一句引入路由器的代码：  import  router  from  './router'，现在我们看一下这个目录下的 js 文件（ src/router/index.js  ）。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

依次看代码可以知道，前面先引入了 路由插件 vue-router，然后显式声明要使用路由  Vue.use(Router)，注意到引入的 HelloWorld 是页面（也可以是组件），然后注册路由器，进行路由的配置。

路由的配置也很简单，就是给不同的 path 分配不同的页面，name 参数不重要，只是用来识别的。

那么到了这里就可以明白了，前面说的红色框里的内容，其实就是 HelloWorld 里面的内容，打开 src / components 目录下的 HelloWorld.vue 就能明白了。

到这里就可以完成路由的配置了。

个人建议：将页面放在pages目录下，组件放在 components目录下

那么如果要访问 http://localhost:8080/#/blog/info 的话要如何配置呢？  只需要给路由多加一个子路由配置即可。

{
  path: '/blog',
  name: 'blog',
  component: Blog,
  children: [
    {
      path: '/',
      component: page1
    },
    {
      path: 'info',
      component: page2
    }
  ]
}

访问 http://localhost:8080/#/blog 的时候会访问 Blog 页面（需要引入），Blog 页面里面放个路由器（<router-view></router-view>）就可以了。

//blog.vue
<template>
    <div>公用部分</div>
    <router-view></router-view>
</template>

然后访问  http://localhost:8080/#/blog/  的时候会往路由容器中放置 page1 的内容，访问 。。/#/blog/info 的时候会往路由容器中放置 page2 的内容。

7. 小结

总结全篇，可以知道Vue的页面架构流程大概是这样的

• index.html 引用  main.js 文件
• main.js 文件引用了 App.vue 文件
• App.vue 文件中包含了公用部分和一个路由器
• 路由器里面的内容由 router 目录下的 index.js 文件控制
• router 目录下的 index.js 文件中配置了路径到页面的映射关系