vue从安装零开始、到项目创建和再到简单的跨域请求处理

本文链接：https://blog.youkuaiyun.com/xiaofangzhen/article/details/121089567

首先，先列出我们接下来需要的东西：

node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像

1）安装node.js

从node.js官网下载并安装node
在这里插入图片描述
安装过程很简单，一直点下一步就ok了

安装完之后,我们通过打开命令行工具（win+R）

输入  node -v  命令

查看node的版本，若出现相应的版本号，则说明你安装成功了。
在这里插入图片描述
npm包管理器，是集成在node中的，所以安装了node也就有了npm

直接输入 npm -v  命令，显示 npm 的版本信息。

在这里插入图片描述
到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

2）安装cnpm

在命令行中输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
然后等待，没报错表示安装成功如下图：

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

3）安装vue-cli 脚手架构建工具

在命令行中运行命令

npm install -g vue-cli

在这里插入图片描述
然后等待安装完成。安装成功如下图：

输入命令行vue ui，终端会报启动信息，这本来很正常。可是呢，输入vue ui，终端没反应!
然后我用vue -h 查看了vue的帮助信息，敢情是根本没有 ‘vue ui’ 这一命令行！
在这里插入图片描述
于是卸载之前的vue

npm uninstall vue-cli -g

在这里插入图片描述
重新安装vue-cli最新版（版本号必须3x以上）就行了

npm install -g @vue/cli

这样就安装完成：如下图：
在这里插入图片描述

使用  vue -h  查看vue的命令列表，就有ui这一命令行了

在这里插入图片描述

输入	vue ui 启动成功了	
打开浏览器,地址栏输入 localhost:8080

在这里插入图片描述
创建vue项目

这里我切换到D盘创建项目

想要在哪个位置创建vue项目，就在对应的地方 输入 vue ui 就行

在这里插入图片描述

包管理器通常我选择 npm

下一步

选择手动
接着下一步

开启router 路由，目录跳转
开启Vuex，它的核心就是 store（仓库）
关闭Linter，这个是代码规范，这个不关掉，后面搞死人

然后下一步
接着创建项目
在这里插入图片描述
然后等待创建完成

创建完成后如下图：

添加插件
element

添加依赖
axios
element-ui
less
less-loader

在这里插入图片描述

然后运行
任务 -》serve 点击运行启动

项目就运行成功了

把vue项目导入IDEA之前，首先要install vue插件

File =》Settings =》Plugins  找到vue插件 安装 然后重启

在这里插入图片描述
然后导入vue项目到IDEA中

File =》Open  然后找到对应的文件夹

在这里插入图片描述
导入以后可以有多种方式启动项目
第一种方式
点击 Add Configuration

点击 + 号 找到 npm 直接点击确定即可

在这里插入图片描述
添加npm进来以后，给Scripts选择serve

出现绿色三角，点击直接运行即可

第二种方式
找到IDEA底部的Terminal（终端）

输入命令 npm run serve

在这里插入图片描述
第三中方式

在package.json加入个  "dev": "vue-cli-service serve"  一样可以运行

在这里插入图片描述

ctrl+c	暂停程序运行

修改app.vue页面
把红色的圈出来的全删掉
在这里插入图片描述
删除后

删除红色圈出来的

删除About.vue
在这里插入图片描述
删除router路由文件夹中的index.js关于About.vue路径的关联

删除HelloWorld.vue
在这里插入图片描述
缩进4个字符

修改Home.vue文件的代码，代码如下

<template>
    <div class="home">
        <img @click="click" alt="Vue logo" src="../assets/logo.png">
    </div>
</template>

<script>
    // @ is an alias to /src
    import axios from 'axios';

    export default {
        name: 'Home',
        components: {
        },
        methods:{
            //图标点击后给后端发送请求
            click () {
                axios.get('http://localhost:8888/test').then((res) =>{
                    console.log(res);
                }).catch((err) =>{
                    console.log(err);
                })
            }
        }
    }
</script>

在这里插入图片描述

点击图片，验证图片是否能跳转到指定地址，出现跨域问题
在这里插入图片描述
解决跨域问题
在后端处理跨域问题

package com.xifang.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author xiaofang
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){
        /**
         * 1.与访问路径
         * 2.请求来源
         * 3.方法
         * 4.允许携带
         * 5.最大时间
         */
        registry
                //允许访问的路径
                .addMapping("/**")
                //配置请求来源
                .allowedOrigins("http://localhost:8082")
                //允许跨域访问的方法
                .allowedMethods("GET","POST","DELETE","PUT","OPTION")
                //是否允许携带参数
                .allowCredentials(true)
                //.allowedHeaders()
                //最大效应时间
                .maxAge(3600);
    }
}