项目总览：https://blog.csdn.net/wuxiaolongah/article/details/105037288
本项目是前后端分离的架构，前后端分离在实际的开发和部署中有很多好处，比如前后端定义好接口文档后，就可以同时进行开发了，这样可以大大提高开发的效率；同时，部署时可以实现动静分离，提高网站的性能等。
在操作前，希望大家先了解一下什么是前后端分离，什么是单页面应用（single page web application，SPA），什么是restuful风格。
这一节主要是说明前端项目如何搭建，后面我会将前端项目和后端项目融合到一起作为多个module，整合到一个项目中去。
由于大部分看该项目的人应该是后端开发人员，这里我会对这个前端项目做较详细的说明，后续的后端项目搭建就不会像这样详细介绍了。
前端开发技术是Vue，使用Vue-cli脚手架快速的搭建开发环境。Vue.js也是Node js的一种，需要运行在node环境中，就像JAVA开发需要安装JAVA运行时环境一样，要先安装Vue.
Vue-cli官网手册： https://cli.vuejs.org/guide/
一、安装node.js
这里我使用的是推荐的版本。安装比较简单，不管是windows还是mac，下载包后傻瓜式的点击下一步，一直到安装结束。
安装完成后就可以使用node -v查看安装的版本了。
node安装完成后，会同时安装npm命令；
npm可以理解成Linux下的yum命令或者JAVA开发时的mvn命令，是用来下载依赖的插件或者软件的。 既然这npm是用来下载软件的，那么就会有类似的下载源，如yum的源或的maven的镜像源；默认情况下都是使用国外的镜像源，下载软件非常慢，使用时我们应该先将镜像源设置成国内的，用于提高下载速度。修改并使用淘宝的镜像源的配置方式如下：
安装速度太慢解决方法：
// 修改镜像地址
npm config set registry https://registry.npm.taobao.org
// 检验是否成功
npm config get registry之后，使用 npm install -g @vue/cli 安装脚手架 。这里的-g是–global的意思，就是全局安装，所以如果使用的是mac系统，执行该命令需要在前面加上sudo。
安装完成后查看vue-cli版本:
如果是旧版本的vue-cli需要更新可以参考官网： https://cli.vuejs.org/zh/guide/installation.html
二、使用vue-cli脚手架构建项目
使用 vue create project-portal 在当前路径下创建项目，这里的project-portal是自定义的前端项目的名字。
进入命令后，可以通过上下箭头选择安装的相关选项，这里我选择手动创建，同时选择下面三个选项：1.babel，目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了兼容，webpack 打包时就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。2.Router: 是构建单页面应用的关键，是用于配置路由的。3.Linter，语法检测工具，这玩意很烦人，每行代码前要空几格都必须满足，不然会报错，为了规范，我们还是安装它：
下面我们默认的路由方式是history,后面我们会修改：
ESlint使用默认：
这里生产package.json文件，这个文件类似java-maven项目中的pom文件，里面有依赖包及插件等配置信息，很重要：
下面是整个安装完成后的结果：
这样我们的项目就搭建好了，在命令行的最下面有两个命令，通过cd project-portal进入项目文件夹；通过npm run serve运行项目后，就可以通过浏览器输入http://localhost:8080访问到项目了。这里我们先不操作。
下面使用编辑器打开项目，这里我使用的是Idea，后端程序员基本上都是使用idea做开发，其他的编辑器也可以使用。
三、使用IDEA编辑器打开项目
打开idea后，首先查看idea是否安装了vue.js插件，如果没有安装或者安装不了，请参考：http://wuxiaolong.tech/?p=419
下面使用idea打开project-portal前端项目：
配置IDEA：add configuration -> + -> npm -> 修改配置并应用即可：
配置完成后，点击apply，这是可以看到下面的界面变化：
点击绿色箭头启动项目，然后使用控制台显示的地址http://localhost:8080/在浏览器访问即可，如果访问成功，则表示项目搭建完成。
四、项目结构介绍
项目结构简介：
几个重要的文件和目录做详细介绍：
1、README.md
这是个项目说明文件，一般一个项目建立完成后，都会有这个文件，文件内容是markdown格式，默认文件中的内容是一些和项目运行相关的命令，可以更新该说明文件，用于说明这个项目的相关情况，如简介、技术栈、作者相关信息，版本更新等，让别人知道项目的一些情况。
2、package.json
这个文件很重要，类似maven项目中的pom.xml，文件中记录了项目的依赖包、依赖的插件、项目启动、打包相关的命令等。当我们执行npm run serve/build等命令时，都会先读这个文件，然后进行编译打包。
右击该文件 -> show npm scripts 可以看到类似maven生命周期（idea右边）相关的参数，并可以通过点击这些命令执行相应的操作。
3、.gitignore
该文件说明，在我们使用git做项目管理时，哪些文件是需要忽略的，不上传git服务器，这里我们需要做相应的配置，让部分文件在push到git服务器时，忽略上传；这里特别需要注意的是node_modules目录，这个目录中放置的是依赖包，这里要忽略掉，因为依赖文件比较大，上传下载都比较耗时；新用户git clone完成项目后，在该项目中通过执行npm install即可在公网下载相关的依赖。同时/dist是项目打包的目录，也不用上传git。这里我的配置如下：
4、index.html
整个项目的唯一一个html文件，这也是为什么该项目叫单页面项目的原因，单页面项目会让用户有更好的体验，具体的优劣大家自行百度。这里特别需要说明的是<div id=”app”></div>，后续页面渲染的时候，是把其他的vue页面放到这个div中进行渲染的。
5.index.js
这个文件是我们的路由配置专用文件。上面我们通过vue-cli构建项目时，路由方式是history，在文件中可以看到。后续我们会修改这种路由方式。
6、App.vue
这个文件是vue文件的根路径文件，vue文件和html很类似。vue是有三部分组成，template:用于写类似html的地方，template中只能有一个一级的标签；script:用于写js的地方，让页面能动起来；style:用于调整页面样式的地方，让页面更好看，颜色更丰富等。
这个文件中关键的是<router-view/> ，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL， index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。
这里的<router-link to="/about">About</router-link>可以使用如下链接访问：7、main.js
这个文件是让App.vue这个根vue文件和html文件关联起来的关键，这里的$mount(‘#app’)，就是讲App.vue挂载到index.html文件的<div id=”app”></div>上；这里的 #app 是个id选择器，对应的就是 id=”app” ;如果 index.html文件的<div class=”app”></div>，则使用类选择器$mount(‘.app’)
8、Home.vue和HelloWorld.vue
这里介绍一下这两个vue文件关于组建引用相关的知识点。我们开发的模块通常都是放在components目录下或者其子目录下，比如这里我们的HelloWorld.vue作为一个vue组件，当这个组件被Home引用时，首先我们需要在 HelloWorld.vue 中使用export将该组件起名并导出；然后，在Home.vue组件中import该组件 HelloWorld，然后在components中注册组件 HelloWorld ；最后使用<HelloWorld />标签调用该组件；这种组件的引用方式是局部引用。
另一种全局组件的引用方式是：首先在main.js文件中import相关的组件；然后使用Vue.component(‘新起的全局组件名’,’导入的具体组件’)；如果在其他的组件中引用这个全局组件只需要<新起的全局组件名 />即可。