后台管理系统_全栈(vue+springboot)(第一天--前端部分)

最新推荐文章于 2023-11-28 13:31:50 发布

肉乎乎的鸭

最新推荐文章于 2023-11-28 13:31:50 发布

阅读量293

点赞数

分类专栏：新手

本文链接：https://blog.csdn.net/zcylxzyh/article/details/114851616

版权

本文档详细介绍了如何使用vue-cli 3.x搭建项目，包括初始化项目、整合ElementUI、Axios的封装及跨域问题的解决。在项目开发阶段，重点讲解了登录组件的创建和路由配置。

摘要由CSDN通过智能技术生成

第一天--前端部分

1、项目环境搭建

1.1 基于vue-cli 3.x 创建项目

第一步：安装
先安装node.js 我的是10.x版本的
安装vue-cli：
npm install -g @vue/cli
安装特定版本的：(这个项目是基于3.10版本开发的)
npm install -g @vue/cli@3.10.0
查看版本：
vue -V
第二步：构建项目
vue create 项目名
选择：自定义

空格是选中

等待安装之后就可以使用

访问页面

1.2 初始化项目

更改标题
更改端口
新建vue.config.js

module.exports = {
   
    devServer: {
   
        port: 8888, //端口号，如果被占用就自动提升1
        host: "localhost",
        https: false, //协议
        open: true //启动服务是自动打开浏览器访问
    },
    lintOnSave: false, //关闭格式检查
    productionSourceMap: false // 打包是不生成.map加快打包速度
}

整合第三方库
安装axios,处理异步请求：
npm i -S axios@0.19.0
安装pubsun-js 实现非父子组件通信
npm i -S pubsub-js@1.7.0

1.3 整合ElementUI

安装
npm i element-ui -S
在 main.js 中写入以下内容：

在这里插入图片描述

1.4 Axios封装和跨域问题

封装Axios对象
在src下创建utils文件夹，在创建request.js

import axios from 'axios'
const request = axios.create({
   
    baseURL: '/',
    timeout: 5000
})

export default request

使用方式：在api文件夹下声明接口，然后在需要使用的地方导入api中对应的js在使用.then获取数据
解决跨域
代理转发:
在vue.config,js中添加

 proxy: {
    //开发环境代理配置
            //当要访问这个路径的时候就交给代理服务器
            '/dev-api': {
   
                //目标服务器地址
                target: '',
                changeOrigin: true, // 开启代理服务器
                pathRewrite: {
   
                    // 访问:/dev-api/db.json 最终会发送 target中目标服务器地址/db.json
                    //将请求地址前缀 /dev-api 替换为空的
                    '^/dev-api': ''
                }
            }
        }