前言：现在的java市场中，前后台分离是最近比较火，在构建项目之前希望大家已经清楚什么是 前后台分离，以及什么是单页面应用和单体应用，所谓的前后台分离就是前后台的代码分开部署，前端页面通过Ajax方式请求后台的restful的后台节后，实现前后台的分离，为什么要这样做呢？
前后台分离
- 方便前后台的开发，前后台只要约定好节后的数据交换的格式，两者就可以齐头并进的进行开发，后台只要提供数据，前台只要把数据进行展示即可
- 另一方面就是方便代码的复用，当前台的页面需要更换的时候，后台不需要动，因为后台只需要提供数据即可，前后不管换成什么样，后台也不需要管，前台只需将数据进行展示即可。
- 方便测试和管理
单体应用
传统的项目就是典型的单体应用，将前后台的代码都写在一个项目中，这个测试和管理也麻烦，代码的复用性查，所以导致后面的代码重构成为了经常的事
单页面应用
就是只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
vue的教程网址：https://cn.vuejs.org/v2/guide/
1.安装Vue CLI
- 首先安装Nodejs，来到官网https://nodejs.org/en/，即可下载安装
- 安装完打开cmd，然后输入node -v查看版本，出现如图所示，安装成功
-同时输入npm -v，出现如图所示，说明npm安装成功：
- 接着输入输入 npm -g install npm ，将 npm 更新至最新版本。
- 也可以选择安装国内镜像，命令为：
npm install -g cnpm --registry=https://registry.npm.taobao.org
但是如果安装了国内的cnpm就一直用cnpm来安装其它的依赖，不要中途又用npm，要是中途不小心用了npm，就把项目中的node_modules给删掉就行了，重新cnpm install一下。 - 之后就是安装脚手架，命令为：npm install -g vue-cli
2.构建项目
在cmd输入
e: //来到e盘
cd myproject //来到myproject 文件夹下
vue init webpack demo
接下来就是一顿输出
install vue-router 是安装路由
ESLint是对代码的校验
其它的直接回车就行了
接下来看一下生成项目的目录节后，如下图：
- build 是构建项目的文件
- config 是项目的配置文件所在
- node_modules是项目的依赖模块的位置
- src是项目的源码的位置，我们写的代码就在这个目录下
来到src的目录下，目录如图所示，红框内的表示我们必须了解的，因为开发一定会用到
- assets 是图片的所在位置
- components 是是我们写的组件的放置的位置，我们开发所写的组件就在这个位置上
- router 是路由所在的位置，我们编写的组件在配置路由的时候，就是在这个js文件中进行配置
- App.vue是根组件，所有的组件都在这个根组件内进行展示
- main.js文件最最重要的是配置index.html与App.vue相联系的配置文件，是根组件能够在index.html内展示
- index.html是页面的入口
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>d3_project</title>
</head>
<body>
<!-- 就是一个普普通通的 html 文件，让它不平凡的是 <div id="app"></div> ，
下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都
将在这个 div 中展示。还有不普通的一点是，整个项目只有这一个 html 文件，
所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上
它们都只不过在一个 div 中。-->
<div id="app"></div>
</body>
</html>
main.js
// 这个main.js文件主要是建立index.html文件与App.vue之间的联系
// 实现把App.vue组件挂载到index.html中
import Vue from 'vue'
import App from './App'
import router from './router'
// 作用是阻止vue 在启动时生成生产提示。
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
// el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标
el: '#app',
// router 代表该对象包含 Vue Router，并使用项目中定义的路由
router,
components: { App },
template: '<App/>'
})
index.js
import Vue from 'vue'
import Router from 'vue-router'
import D3JS from '@/components/D3JS'
Vue.use(Router)
// 即为定义url与组件之间的映射关系
export default new Router({
routes: [
{
path: '/',
name: 'D3JS',
component: D3JS
}
]
})
最后cd demo，来到项目的根目录下，运行npm run dev，访问url为
http://localhost:8080,就可以看到这个页面了，如图所示，说明执行成功，前端的项目初始化完成
更多的教程请关注：非科班的科班
