Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

Vue安装

1.Vue/cli安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查其版本是否正确

vue --version

如需升级全局的 Vue CLI 包

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

2.项目安装

1.新建项目

vue create demo1Test # demo1Test为自定义项目名称

或者用Vue2.x的用法

vue init webpack demo1Test # demo1Test为自定义项目名称

可能会提示你进行全局安装（没有则跳过），还需要安装webpack。

npm i -g @vue/cli-init

也可以用Vue3特有的图像页面进行创建项目。

vue ui

2.测试

cd demo1Test
npm run dev # 或者npm run serve

看访问是否成功。

ElementUI安装

npm i element-ui -S # npm install --save element-ui

引入组件库

在main.js中

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

需要注意的是，样式文件需要单独引入。

跨越问题

这里是全局跨越。

自定义类实现WebMvcConfigurer接口。

已验证

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

未验证

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //添加映射路径
        registry.addMapping("/**")
            //是否发送Cookie
            .allowCredentials(true)
            //设置放行哪些原始域   SpringBoot2.4.4下低版本使用.allowedOrigins("*")    
            .allowedOriginPatterns("*")
            //放行哪些请求方式
            .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
            //.allowedMethods("*") //或者放行全部
            //放行哪些原始请求头部信息
            .allowedHeaders("*")
            //暴露哪些原始请求头部信息
            .exposedHeaders("*");
    }
}

ElementUI好像已经没有维护了，但是出了一个Element Plus ，是基于Vue3的。它的稳定版2022.2.7发布。

Element Plus官网文档