Vue脚手架的安装和使用

1.查看自己电脑是否安装nodejs

在黑窗口输入node --version

Node.js (nodejs.org)

不要安装在中文目录下，以免出现错误

2.安装NPM

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

在黑窗口输入npm --version

3.安装Vue脚手架

在黑窗口中使用vue cli安装Vue脚手架

使用vue --version 查看当前是否安装vue脚手架

安装 | Vue CLI (vuejs.org)

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

在黑窗口使用vue ui命令

5.Vue工程中安装elemengt ui

6.在Vue工程中安装axios

6.1第一种安装方式 使用命令安装

npm install -s axios

6.2第二种安装方式，使用图形化界面

7.通过工具打开vue工程

工具:

<1> Vscode [实际开发中使用的都是vscode]

<2> Webstorm [它和idea一模一样--这个与idea界面类似，笔者是后端，所以使用这个上手比较快]--安装教程自行百度

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

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

9.父组件向子组件传递数据

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

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

10.路由

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

11.Vue脚手架工程+后台调用接口

在main.js中导入axios并挂载到vue对象中

//导入axios插件  
import axios from "axios";  
//把axios挂载到Vue中  
Vue.prototype.$http=axios;

这个时候出现了跨域问题

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

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

[1]ip不同

[2]端口号不同

[3]协议不同

如何解决跨域:

第一种: 前端解决。--笔者是学后端的，不会前端解决

第二种: 后端解决.

<1>可以使用nginx解决。

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

如果使用注解，在类多的时候就会变得很麻烦

12.配置类的方式解决跨域问题

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);
 }
}