1.首先安装Nodejs

(1)可以去官网下载-----安装比较简单----不要安装在中文目录下！！！！

https://nodejs.org/en/download/http://xn--nodejs-np7ii83deeq211d （2）自己电脑是否安装nodejs

node --version

2. 安装NPM

如果你安装了nodejs--默认会安装NPM.

npm --version 可能有些系统不会帮你配置环境变量，需要自己配置一下nodejs环境变量，不然没有办法使用npm命令

3. 安装vue脚手架

使用vue --version 查看当前是否安装vue脚手架 https://cli.vuejs.org/zh/guide/installation.html

如果没有安装使用下面的命令

npm install -g @vue/cli

4. 使用vue脚手架创建工程

配置好以上的插件后

（1）在本地先创建一个文件夹，方便用来保存vue工程

（2）在这个文件夹打开命令cmd，并使用vue ui命令

随后会跳转到这个网页

（3）开始创建新项目

5.vue工程中安装elementui

第一种可以使用命令来安装

npm install -s element-ui

6. 在vue工程中安装axios

第一种通过命令

npm install -s axios

第二种图形化

7. 通过工具打开vue工程

工具:

<1> Vscode [一般开发必须用vscode]

<2> Webstorm [它和idea一模一样] -----我这里选用的是webstorm

<3> idea打开---安装vue插件

使用webstorm打开刚才所创建的工程

打开setting设置搜索node，改为你下载的node路径

npm run serve

8. 一个组件引用另一个组件

(1) 在app.vue引入被引用的组件

(2)声明该组件

(3)使用组件

（4）在components中创建Qy165.vue

8.1 父组件向子组件传递数据

（1）在子组件中使用props来声明变量用来接受父组件传递的数据。

（2）父组件在使用子组件时属性名来传递

9. 路由

vue中的跳转都是通过路由进行跳转的。不能再使用location.href="".

（1）在router目录下的index.js编写

（2）在views下创建两个vue文件

（3）在app.vue下引用路由

（4）启动工程---效果如图

10. vue脚手架工程+调用后台接口

（1）编写一个登陆的vue

（2）使用路由跳转

（3）引用axios，如果没有的话，使用终端下载axios--------npm install -s axios

（4）启动springboot和vue，会报跨域问题

（5）解决跨域问题

跨域问题: 从一个域访问另一个域的数据时可能出现跨域问题.

只要以下条件不同就认为是两个域.

[1]ip不同

[2]端口号不同

[3]协议不同

如何解决跨域:

第一种: 前端解决。

第二种: 后端解决. ------这里采用后端解决

<1>可以使用nginx解决。

<2>使用注解---再每个接口中使用@CrossOrigin

第一种：在每个接口类上面加上@CrossOrigin注解

之后在测试即可打印出信息

第二种：搞一个配置类。---不能同时使用。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

 // 当前跨域请求最大有效时长。这里默认1天
 private static final long MAX_AGE = 24 * 60 * 60;

 @Bean
 public CorsFilter corsFilter() {
     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
     CorsConfiguration corsConfiguration = new CorsConfiguration();
     corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
     corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
     corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
     corsConfiguration.setMaxAge(MAX_AGE);
     source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
     return new CorsFilter(source);
 }
}

使用Vue脚手架搭建的前端工程+后端shiro的整合详解