首先，先列出我们接下来需要的东西：

node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像

1） 安装node.js

从node.js官网下载并安装node

安装过程很简单，一直点下一步就ok了

安装完之后,我们通过打开命令行工具（win+R）

输入  node -v  命令

查看node的版本，若出现相应的版本号，则说明你安装成功了。

npm包管理器，是集成在node中的，所以安装了node也就有了npm

直接输入 npm -v  命令，显示 npm 的版本信息。

到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

2） 安装cnpm

在命令行中输入

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

然后等待，没报错表示安装成功如下图：

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

3） 安装vue-cli 脚手架构建工具

在命令行中运行命令

npm install -g vue-cli

然后等待安装完成。安装成功如下图：

输入命令行vue ui，终端会报启动信息，这本来很正常。可是呢，输入vue ui，终端没反应!
然后我用vue -h 查看了vue的帮助信息，敢情是根本没有 ‘vue ui’ 这一命令行！

于是卸载之前的vue

npm uninstall vue-cli -g

重新安装vue-cli最新版（版本号必须3x以上）就行了

npm install -g @vue/cli 

这样就安装完成：如下图：

使用  vue -h  查看vue的命令列表，就有ui这一命令行了

输入	vue ui 启动成功了	
打开浏览器,地址栏输入 localhost:8080

创建vue项目

这里我切换到D盘创建项目

想要在哪个位置创建vue项目，就在对应的地方 输入 vue ui 就行

包管理器 通常我选择 npm

下一步

选择 手动
接着 下一步

开启router 路由，目录跳转
开启Vuex，它的核心就是 store（仓库）
关闭Linter，这个是代码规范，这个不关掉，后面搞死人

然后下一步
接着 创建项目

然后等待创建完成

创建完成后如下图：

添加插件
element

添加依赖
axios
element-ui
less
less-loader

然后运行
任务 -》serve 点击运行 启动

项目就运行成功了

把vue项目导入IDEA之前，首先要install vue插件

File =》Settings =》Plugins  找到vue插件 安装 然后重启

然后导入vue项目到IDEA中

File =》Open  然后找到对应的文件夹

导入以后可以有多种方式启动项目
第一种方式
点击 Add Configuration

点击 + 号 找到 npm 直接点击确定即可

添加npm进来以后，给Scripts选择serve

出现绿色三角，点击直接运行即可

第二种方式
找到IDEA底部的Terminal（终端）

输入命令 npm run serve

第三中方式

在package.json加入个  "dev": "vue-cli-service serve"  一样可以运行

ctrl+c	暂停程序运行

修改app.vue页面
把红色的圈出来的全删掉

删除后


删除红色圈出来的

删除About.vue

删除router路由文件夹中的index.js关于About.vue路径的关联

删除HelloWorld.vue

缩进4个字符

修改Home.vue文件的代码，代码如下

<template><div class="home"><img @click="click" alt="Vue logo" src="../assets/logo.png"></div>
</template><script>// @ is an alias to /srcimport axios from 'axios';export default {name: 'Home',components: {},methods:{//图标点击后给后端发送请求click () {axios.get('http://localhost:8888/test').then((res) =>{console.log(res);}).catch((err) =>{console.log(err);})}}}
</script>

点击图片，验证图片是否能跳转到指定地址，出现跨域问题

解决跨域问题
在后端处理跨域问题

package com.xifang.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/*** @author xiaofang*/
@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry){/*** 1.与访问路径* 2.请求来源* 3.方法* 4.允许携带* 5.最大时间*/registry//允许访问的路径.addMapping("/**")//配置请求来源.allowedOrigins("http://localhost:8082")//允许跨域访问的方法.allowedMethods("GET","POST","DELETE","PUT","OPTION")//是否允许携带参数.allowCredentials(true)//.allowedHeaders()//最大效应时间.maxAge(3600);}
}

跨域问题得到解决

后端请求来源地址可以配两种，但是前后端地址都要一 一对应

1.Local:

2.Network:


后面还会写有关前端axios的挂载