SpringBoot 2 整合VUE开发

2 整合VUE开发

2.1 VUE简介

Vue框架设计采用的是MVVM设计模式MVVM是Model-View-ViewModel的简写，主要包括view（视图）、model（模型）、ViewModel（视图模型）。模型指的是后端传递的数据；视图指的是所看到的页面；视图模型是mvvm模式的核心，它是连接view和model的桥梁。它的两个主要作用是：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向的实现我们称之为数据的双向绑定。MVVM流程图如下：

在VUE项目开发时我们不需要关注ViewModel层，这是Vue.js的内置功能，只需要关注视图层和模型层即可。vue通过一个尽量简单的api来提供api提供反应式的数据绑定和可组合、复用的视图组件，不是一个大而全的框架。快速开发原型，混合其他的库做更多的事情。

2.2 安装及快速入门

Web1.0时代网页是“只读的”；在Web 1.0之后，互联网的第二次迭代被称作Web 2.0，也就是“可读写”网络，形形色色的社交网站和点评网站，是Web 2.0的代表； Web 3.0时代，技术的发展带来的是在线应用和网站可以接收到已经在网络上的信息，并将新的信息和数据反馈给用户，网站因为有了自主学习能力，而变得更加智能。

随着web技术的发展，前端技术也从原来的操作DOM的时代，发展到如今围绕着操作数据的阶段，之前大家常用的前端框架是JQuery、Bootstrap框架， 而今天大家用得更多的是React、Vue、Angular三大主流框架，这三个框架各有各的优势，而且都较为成熟。
vue作为三大前端框架之一，社区比较活跃，应用也已经十分广泛。下面主要介绍vue框架的安装和开发。

Step1：安装node.js

安装完node.js之后，npm也会自动安装
查询是否安装成功的命令：
node -v
npm -v

Step2：安装脚手架工具vue-cli

命令如下：
npm install --global vue-cli

Step3：全局安装Webpak

命令如下：
npm install -g webpack
npm install -g webpack-cli
查看版本：
webpack -v

Step4：VUE项目初始化

vue项目初始化命令如下：
vue init webpack helloworld
注：安装过程 中有个选项（Use ESLint to line your code ?选择 No ）

初始化完成后的vue项目目录如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Step5: 安装依赖

进入到Helloworld目录下，使用npm install 安装package.json包中的依赖
命令如下：
cd Helloworld
npm install

Step6：运行项目

执行下面命令运行项目：
npm run dev

Step7：停止项目

ctrl+c，即可停止项目的运行

2.3 VUE项目目录说明

build：项目构建(webpack)相关代码
config：配置目录，包括端口号等
node_modules：npm加载的项目依赖块
src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等
components：该目录里存放的我们的开发文件组件，主要的开发文件都存放在这里了
App.vue：项目入口文件
main.js：项目的核心文件
router：路由配置目录
static：放置一些静态资源文件
test：初始测试目录，可删除
index.html：首页入口文件
package.json：项目配置文件
README.md：项目的说明文档，markdown 格式

2.4 VUE生命周期

VUE的运行过程都在node环境下进行，执行生命周期如下图所示：

VUE的执行过程包括以下几个步骤：

• (1)在执行npm run dev的时候，首先在当前文件夹下的项目中找package.json文件,启动默认端口是8080。
  

• (2)执行src的main.js文件，在该文件中创建一个Vue的实例，入参包括要渲染的元素、路由、绑定的组件以及模版。
  

• (3)渲染模板并执行App.vue组件
  在App.vue组件中有一个router-view，router-view对应的路由配置在src/router目录下，该文件夹下有个index.js文件，该文件用于配置路由词典，指定了路由地址是空，加载HelloWorld组件。
  
  

2.5 第一个工程

Step1:在src下创建views文件夹，并在src/views下创建.vue结尾的文件

• 布局页面 Layout.vue
• 页面导航菜单top.vue
• 首页main.vue
• 关于页面about.vue

• (1)src/views/Layout.vue

<template>
  <div>
    <div>
      <top>top>
    div>
    <div>
      <router-view :key="key" />
    div>

  div>

template>
<script>
  import Top from '@/views/top'
  import Main from '@/views/main'
  import About from '@/views/about'
  export default {
    name: 'Layout',
    components: {
      Top,
      About,
      Main
    }
  }
script>

• (2)src/views/top.vue

<template>
  <div class="top navbar-fixed-top">
    <div class="container">
      <div class="row">
        <div class="col-xs-2">div>
        <div class="col-xs-8 text-center">
          <router-link :to="{name:'Main'}"><strong>首页strong>router-link>
          <router-link :to="{name:'About'}"><strong>关于strong>router-link>

        div>
        <div class="col-xs-2">div>
      div>
    div>
  div>

template>
<script>
  export default {
    name: 'Top',
    data(){
      return {
        message: '欢迎使用zone7 框架'
      }
    }

  }

script>

• (3)src/views/main.vue

<template>
  <div>
    {{message}}
  div>
template>
<script>
  export default {
    name: 'Main',
    data(){
      return {
        message: 'Hello World 这是首页'
      }
    }
  }

script>

• (4)src/views/about.vue

<template>
  <div>
      {{message}}
  div>
template>

<script>
export default {
  name: 'About',
  data () {
    return {
      message: '欢迎使用Zone7 框架'
    }
  }
}
script>

Step2:修改src/router/index.js 添加页面路由

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/views/main'
import Layout from '@/views/Layout'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '',
      component: Layout,
      redirect: 'main',
      children: [
        {
          path: 'main',
          component: () => import('@/views/main'),
          name: 'Main',
          meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }  
        },
        {
          path: 'about',
          component: () => import('@/views/about'),
          name: 'About',
          meta: { title: '关于', icon: 'about', noCache: true, affix: true }   
        },
      ]
    }
  ]
})

Step3：运行npm run dev