创建简单的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/

创建简单的vue+element-ui+axios前端框架_第1张图片

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

 

你可能感兴趣的