从0搭建前后端分离项目——集成开发（二）

• 后端创建一个Spring Initializr项目，选择web环境就OK。
• 前端创建一个Vue项目，建议用命令行的方式创建完之后，用idea打开吧

动手操作之前，我跟大家科普一下 “前后端分离” ， “单页面应用” 。

前后端分离：前端页面通过 ajax 调用后端的 restuful api 进行数据交互。我在知乎上看到了一个比较好的解释是这样的：如果前端和后端只通过简单的 API 文档就能进行数据交流，就说明他们的逻辑是分离的。我们可以称之为「前后端代码分离」

单页面应用（single page web application，SPA）：只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

这里我们着重讲一下前端项目的创建方法吧，后端创建有问题，欢迎提问哦。

• 安装Node.js，查看Node.js版本：node -v
• 之后用cnpm代替npm（国内库，访问更快），安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org或者（新）：npm install -g @vue/cli
• 安装脚手架cnpm install -g vue-cli
• 创建我们的工作文件夹的位置，这里我放在了e盘里，这里我就省略创建文件夹的步骤了。
• 跳到工作区的路径之后，初始化我创建的webpack文件夹中llsleader-vue工程，命令：vue init webpack llsleader-vue
• 之后等他安装好，运行，指令：npm run dev
• 访问一下：http://localhost:端口号
  
  小白白的是这个：
  

我们来看一下前端工程的文件结构：

看一下我们的index.html文件

大家看一下我箭头指的地方，之后我们所有显示的内容都会在这两个<div></div>中。这也是我之前在百度百科给大家找的什么是单页面应用的解释。
        OK，讲到这里，我们所有的前端，后端的环境基本都配置完了。前后端的交互，进行方案的选型，这也是一个值得思考的问题。
        下一篇文章，我们一起学习一下前后端的交互，开始访问我们的后端！奥利给！咱们下期再见！