思路转换

Vue 和 传统 jQuery 开发的区别

从技术角度看，Vue.js 是关注 MVVM 模型的 ViewModel 层，它通过双向数据绑定，把 View 层和 Model 层连接起来，通过对数据的操作就可以完成对页面视图的渲染，不再需要开发人员关注 html 渲染层。

Vue 适合复杂数据操作的页面，本质是面向数据编程。不用再绞尽脑汁查找元素，也不必动态 append 大量的 HTML 文本，只需专注数据和处理方法的 Vue 编程方式，比传统基于 jQuery 页面元素操作的前端编码方式更适合 Java 程序员。

环境搭建

1. node.js环境（npm包管理器）下载地址：https://nodejs.org/en/
2. cnpm npm 的淘宝镜像，加速包下载

npm install -g cnpm --registry=http://registry.npm.taobao.org

3. vue-cli 脚手架，这个是我们创建和打包 Vue 项目的工具，通过 node.js 安装：

npm install -g vue-cli

安装完成后，查看版本号：

4 IDEA 中安装 Vue.js 插件
5 IDEA 中设置 Vue 文件格式。

Vue 项目创建及目录结构

创建 Vue 项目有三种方式，不同方式创建的项目目录结构不太相同。

第一种

vue create 和 vue ui 命令创建前端项目，vue ui 就是前者的图形界面化方式。

默认选项会创建一个包含默认配置的项目，等待命令执行完成，就创建了一个完整的 Vue 工程：

目录结构如下：

各文件的作用：

• node_modules 项目依赖的前端第三方包，类似 Java 的 jar ，前端依赖的第三方 js 都是以模块为单位引入的；
• public 项目发布的首页
• src 项目源码
• babel.config.js，Babel是将ES6及以上版本的代码转换为ES5的工具，解决原生 JS 兼容问题。
• package.json 项目依赖包配置
• editorconfig 编辑配置，如空格个数等
• vue.config.js 打包配置文件，vue-cli 创建时会缺失，需要手动添加。

开发时主要关注 src 目录，它是前端源码目录，跟 Java 工程的 src 一样：

目录作用：

• assets： 各种前端静态资源，如 css 和 image 资源文件。
• components： 自定义的 Vue 组件。
• router： Vue 路由定义，就是定义 URL 路径和对应 Vue 文件的映射关系。
• store： Vue 有一种数据数据传递方式，通过全局存储数据进行的，插件是 vuex。
• views： 项目的页面，跟 components 差别不大，主要存储项目页面的主页面 Vue 文件的，比如登录页面，它可能包含表单、按钮两部分拆解的小组件；类似 Controller 主控页面。
• App.vue ：项目入口文件，如定义菜单，路由跳转主键等。类似 Java 的 main 方法所在的类。
• main.js 项目入口文件，完成各种挂载，依赖声明，类似 main 方法。

第二种

用 vue-init wepack projectName 工具创建：

根据模板生成的目录结构会丰富一些：

这种方式会多 config 和 build 目录，config 中是 vue 打包配置，功能与上面的 vue.config.js 一致。

前后端分离开发及部署合并

前后端分离，优势是前端开发不再需要等待后端的数据。

前后端分离

前端开发已经朝着模块化、工程化的方向发展了，不再是随意创建 .js 文件、随意写原生 JS 的编程方式了，模块化其实类似 OOP 面向对象编程，每个模块 export 导出一种功能，通过 import 被其他模块引用。

前面创建的 Vue 项目就是层级清晰的工程结构，但本质还是 html、js 等静态资源，需要放入 web 文件目录中。

前端开发时，编码时用静态数据，运行前端模块通过 npm run serve 命令，node.js 提供 web 服务，可以看到前端模块发布成 Web 应用。

前端打包及部署

Vue 项目发布需要通过 npm 命令打包，生成 Web 工程文件，放到 Web 服务器中部署的。思路跟 Java 应用一样，源码到打包文件变换过程如下：

打包时，在 vue.config.js 打包配置中，配置项目打包文件输出目录：

目前我们项目前后台目录创建有两种形式，打包都是将前端工程打包到 Java 项目的 web 资源目录下的。

Vue 工程和后端工程的位置

第一种，前后台项目共用一个工程目录，即创建一个 Java 的 maven 工程后，再将 Vue 的工程文件放到该 Java 工程目录下，二者共用一个根目录：

src 下的 main 就是 Java 工程，这是一个 SpringBoot 的项目，vue.config.js 中将 Vue 工程打包到 /src/main/resources/static 目录，成为 Java Web 工程的 web 文件了。这种方式，只需要开一个 IDEA 窗口。

第二种，前后台各自用自己的目录，打包时，同样将 Vue 打包到 Java 工程的 /xxx/src/main/resources/static ，作为 Java Web 工程文件。

如果项目采用多模块开发时，每个模块都分为前端和后台目录，xxx-view 是 Vue 工程，xxx-web 是 Java 工程，前后台工程分离，但是需要开多个 IDEA 窗口。