创建简单的vue+element-ui+axios前端框架

1、生成vue项目

node -v
npm -v
vue -V

1.在要创建项目的文件夹下cmd，然后命令： vue create vue-project-1，回车
2.在控制台上下键选择安装方式,然后回车
default (bable，eslint） // 默认
Manually select features // 手动

选择默认回车后直接等待创建出项目
a.运行测试：进入项目文件夹目录下CMD，然后命令： npm run serve，。。浏览器访问：：http://localhost:8080/

选择手动
a.选择自己需要的特性（上下键移动键，空格键选中），回车, 特性说明见下面截图
b.是否使用历史路由，输入n,回车
c.选择项目里面需要支持何种动态样式语言，选择第二个，回车
d.选择配置文件的位置，因为每个插件都有自己单独的配置文件，我们选择第一个，回车
e.是否将当前配置选项保存起来，方便下次创建项目时使用。输入 n ，回车
h.运行测试：进入项目文件夹目录下CMD，然后命令： npm run serve，。。浏览器访问：：http://localhost:8080/

2、引入element-ui

1）npm i element-ui -S

2）import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3）element官网

https://element.eleme.cn/#/zh-CN/component

3、安装axios

1.安装axios模块npm install -- save axios

2.main.js导入ajax并设置后端地址
//导入axios
var axios = require('axios');
axios.defaults.baseURL = 'http://localhost:80';
Vue.prototype.$axios = axios;

4、解决axios跨域问题

服务端创建配置类

@Configuration
public class CommonIntercepter {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //允许任何域名
        corsConfiguration.addAllowedOrigin("*");
        //允许任何头
        corsConfiguration.addAllowedHeader("*");
        //允许任何方法
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //注册
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}