创建Vue项目的过程以及易犯错

最新推荐文章于 2024-07-11 13:05:51 发布

HXD933644

最新推荐文章于 2024-07-11 13:05:51 发布

阅读量282

点赞数 1

分类专栏：代码文章标签： vue java

本文链接：https://blog.csdn.net/HXD933644/article/details/106504635

版权

代码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、首先创建项目最好是用命令行在某一个指定的位置创建，创建时，用vue create 项目名即可创建，
创建完事后还需要再main.js中引入ElementUI的依赖

↓ 在main.js中引入所有的ElementUI以及axios的依赖

//element-UI
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

//axios
import axios from 'axios'
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios)

引入完事后如果访问ElementUI报错，那就去下载一下ElementUI命令为：npm i element-ui -S

如果报错get未定义那就去执行npm install --save axios vue-axios安装axios
官网都有：elememtUi官网：https://element.eleme.cn/#/zh-CN/component/installation

axios官网：http://www.axios-js.com/docs/vue-axios.html

然后记得写三大部分：export default{ data(){ return{} }，methods:{}，created(){} }

二、列表：

记得解决跨域问题，如果用@CrossOrigin解决不了就↓ 引入下面的个文件

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 跨域：协议不同、主机不同、端口不同、路径不同时候，ajax请求是需要配置的。
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //允许所有来源
                .allowedOrigins("*")
                //允许所有方法：Get、Post、Put、Delete
                .allowedMethods("*")
                //允许所有的头信息
                .allowedHeaders("*")
                //是否需要跨域验证
                .allowCredentials(true)
                //认证过期时间：单位秒
                .maxAge(3600);
    }
}