项目创建第一天 搭建前端环境

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、环境是什么?
  • 二、使用步骤
    • 1.前台搭建方式
    • 1.创建项目
    • 2.目录结构
    • 3. 安装elementui
    • 4. 创建路由
    • 5.使用axios
    • 6.bug记录
      • 6.1出现跨域问题
      • 6.2 解决方式
        • 6.2.1 创建vue.config.js
    • 参考链接解决跨域问题
    • 7.bug记录
  • 总结


前言

提示:这里可以添加本文要记录的大概内容:

前端环境 Hbuider x + elementui
转发 nginx
后台环境 springcloud


提示:以下是本篇文章正文内容,下面案例可供参考

一、环境是什么?

示例:构建代码的土壤

二、使用步骤

1.前台搭建方式

在这里插入图片描述

1.创建项目

在这里插入图片描述

2.目录结构

3. 安装elementui

npm i element-ui -S

导入
在这里插入图片描述

import Vue from 'vue'
import App from './App.vue'
/* 使用elementUI组件 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
/* 引入路由,才能使用,记得在下面的new Vue里注册这个路由 */
import router from './router/router.js'

4. 创建路由

在这里插入图片描述

安装路由

npm install 

在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
 
Vue.use(Router)
 
export default new Router({
	routes: [
		{path: '/',component:Welcome},
		{path: '/home',component:Home},
	]
})

5.使用axios

npm install axios 

在根目录配置
在这里插入图片描述

和路由配置相同,在需要的时候直接引入

在这里插入图片描述

6.bug记录

cess to XMLHttpRequest at 'http://localhost/sockjs-node/info?t=1683340460770' 
from origin 'http://manage.leyou.com' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested resource.

6.1出现跨域问题

在这里插入图片描述

6.2 解决方式

在这里插入图片描述

6.2.1 创建vue.config.js

// 假设要请求的接口是:http://40.00.100.100:3002/api/user/add
module.exports = {
    devServer:{
      host:'localhost',  // 本地主机
        port:5000,  // 端口号的配置
        open:true,  // 自动打开浏览器
        proxy:{
          '/api': {   //  拦截以 /api 开头的接口
            target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,    //这里true表示实现跨域
            secure: false, // 如果是https接口,需要配置这个参数
            pathRewrite: {
              '^/api':'/'  //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/api/user/add',直接写‘/api/user/add’即可
            }
          },
    // 假如又有一个接口是:http://40.00.100.100:3002/get/list/add
    // 那就再配置一个 get的,如下:
          '/get': {   //  拦截以 /get 开头的接口
            target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,    //这里true表示实现跨域
            secure: false, // 如果是https接口,需要配置这个参数
            pathRewrite: {
              '^/api':'/'  //这里理解成用‘/api’代替target里面的地址,
            }
          }
			// 调用的时候直接  /get/list/add  就可以了
        }
    }
  }

  // 注意:修改了配置文件后一定要重启才会生效;

参考链接解决跨域问题

7.bug记录

ient:169 Invalid Host/Origin header e

出现问题是利用nginx做了反向代理必须在vue中允许反向代理

disableHostCheck: true, //允许反向代理

在这里插入图片描述

总结

提示:这里对文章进行总结:
例如:以上就是对前端项目创建

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/18272.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年会展服务研究报告

第一章 行业概况 会展行业是指一系列与会议、展览、展示相关的服务和经济活动的总称,是加强企业间交流、促进合作和推动经济发展的重要手段。该行业涉及广泛,包括会议和展览的组织、场地租赁和设计、活动策划和执行、展品运输和咨询服务等各个环节。随着…

tiechui_lesson03_缓冲读写与自定义控制

学习了与应用层通过缓冲区方式的交互&#xff0c;包括读写&#xff0c;自定义控制等。小坑比较多&#xff0c;大部分是是头文件和设置上的错误&#xff0c;跟着视频敲想快进就跳过了一些细节。包括&#xff1a; <windef.h> 头文件的引用 //使用DWORD等类型switch语句…

基于标签的协同过滤算法实现与个人兴趣相关的文章推荐

一、前言 在当前信息爆炸的时代&#xff0c;每天都会涌现出大量的文章&#xff0c;人们有时候会感到信息的获取难度比筛选更大。而作为信息的提供者&#xff0c;我们应当为用户提供依据个人兴趣的文章推荐。 本项目中的文章标签相似度推荐功能使用了一种基于标签的协同过滤算…

Java版本的工程项目管理系统源代码之工程项目管理系统面临的挑战

​ ​工程项目管理系统是指从事工程项目管理的企业&#xff08;以下简称工程项目管理企业&#xff09;受业主委托&#xff0c;按照合同约定&#xff0c;代表业主对工程项目的组织实施进行全过程或若干阶段的管理和服务。 ​系统定义 工程项目管理企业不直接与该工程项目的总承包…

易视腾iS-E5-NGH_3798MV100_MT7601_卡刷固件包_当贝纯净桌面

易视腾iS-E5-NGH_3798MV100_MT7601_卡刷固件包_当贝纯净桌面 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0…

产品经理 - 原型图设计软件

原型图设计软件哪个好用&#xff1f;6款好用软件推荐&#xff01; - 知乎 原型图都可以用什么软件做&#xff1f;11款好用软件分享&#xff01; 摩客, 墨刀 2014 墨刀是A股上市公司万兴科技旗下的在线一体化产品设计协作平台 即时设计是一款支持在线协作的专业级 UI 设计工…

回首来路多感概,最是奋斗动人心。

我们必需要在不同的时代有不同的领悟&#xff0c;才能充满生机地去迎接生命中每个新的开始。 文章目录 前言 初心 成长 收获 憧憬 出发 前言 今天是我成为csdn创作者一周年纪念日&#xff0c;我非常开心能够和大家分享我的写作之旅。在这一年里&#xff0c;我经历了许多挑…

QT QGraphicsView 提升到 QChartView报错 解决方案

QT QGraphicsView 提升到 QChartView报错 解决方案 本文主要描述, 使用QT提供的QChartView来绘制图表,提升QGraphicsView控件继承QChartView后,然后将QGraphicsView提升到我们自己写的类,怎么才能确保提升后编译不报错. [问题描述] 使用QGraphicsView显示图表的时候,我们需要将…

基于 TiDB + Flink 实现的滑动窗口实时累计指标算法

作者&#xff1a;李文杰 前言 在不少的支付分析场景里&#xff0c;大部分累计值指标可以通过 Tn 的方式计算得到 。随着行业大环境由增量市场转为存量市场&#xff0c;产品的运营要求更加精细化、更快速反应&#xff0c;这对各项数据指标的实时性要求已经越来越高。产品如果能…

WRF模式

随着生态文明建设和“碳中和”战略的持续推进&#xff0c;我国及全球气候变化及应对是政府、科学界及商业界关注的焦点。气候是多个领域&#xff08;生态、水资源、风资源及碳中和等问题&#xff09;的主要驱动因素&#xff0c;合理认知气候变化有利于解释生态环境变化机理及过…

使用SaleSmartly自动化流程的 5 个原因

想象一下&#xff0c;如果您可以采用智能数字解决方案来减轻团队和公司的手动和重复业务流程负担。它可以帮助您节省时间、提高公司的底线、消除冗余并增强数据管理。SaleSmartly&#xff08;ss客服&#xff09;就是这样。 通过利用自动化的力量&#xff0c;SaleSmartly&#x…

【Java】继承和多态

文章目录 一、继承1.继承的例子&#xff08;is-a&#xff09;2.组合的例子&#xff08;has-a&#xff09; 二、多态1.重写2.重载 三、继承的语法四、继承的注意事项1.初始化的顺序&#xff1a;2.super关键字 五、继承访问限定符六、多态实现方式七、多态的理解注意事项&#xf…

MGV2000_2+16_当贝纯净桌面卡刷固件包-内有教程

MGV2000_216_当贝纯净桌面卡刷固件包-内有教程 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0c;运行速度提…

Python爬虫入门之爬虫解析提取数据的四种方法

本文主要介绍了Python爬虫入门之爬虫解析提取数据的四种方法&#xff0c;通过具体的内容向大家展现&#xff0c;希望对大家Python爬虫的学习有所帮助。 基础爬虫的固定模式 笔者这里所谈的基础爬虫&#xff0c;指的是不需要处理像异步加载、验证码、代理等高阶爬虫技术的爬虫…

数据结构之队列,实现队列的增删改查

目录 一、队列的定义 二、队列的实现 1.使用链表来实现队列 2.实现队列的接口 初始化队列 void QueueInit(Queue *pq) 队尾入队列 void QueuePush(Queue *pq,QDataType data) 队头出队列 void QueuePop(Queue *pq) 获取队列头部元素 QDataType QueueFront(Queue *pq) …

2D火焰特效

Unity面片实现火焰效果 一、效果说明 大家好&#xff0c;我是阿赵。这是一个火焰的效&#xff0c;不过它不是粒子做的&#xff0c;是用一个面片做的&#xff0c;可以理解成是2D的特效。这个例子很简单&#xff0c;但可以拓展一下思路&#xff0c;原来除了用序列帧和粒子做动画…

Cadence Allegro BGA类器件扇孔操作教程

对于BGA扇孔&#xff0c;同样过孔不宜打孔在焊盘上&#xff0c;推荐打孔在两个焊盘的中间位置。很多工程师为了出线方便&#xff0c;随意挪动BGA里面过孔的位置&#xff0c;甚至打在焊盘上面&#xff0c;如图1所示&#xff0c;从而造成BGA区域过孔不规则&#xff0c;易造成后期…

行为型模式-中介者模式

中介者模式 概述 一般来说&#xff0c;同事类之间的关系是比较复杂的&#xff0c;多个同事类之间互相关联时&#xff0c;他们之间的关系会呈现为复杂的网状结构&#xff0c;这是一种过度耦合的架构&#xff0c;即不利于类的复用&#xff0c;也不稳定。例如在下左图中&#xf…

HR如何快速提升工作效率?

从招聘到用人管理各个环节&#xff0c;人力资源部门都是公司最重要的职能部门之一&#xff0c;hr的日常工作涉及众多复杂繁琐的内容&#xff0c;比如人员招聘&#xff0c;考核培训等都离不开大量的数据整理和录入操作&#xff0c;但那些和“人”相关的数据信息&#xff0c;经常…

SOFA Weekly|开源之夏 MOSN 与 Layotto 项目简介、社区会议预告、社区本周贡献

SOFA WEEKLY | 每周精选 筛选每周精华问答&#xff0c;同步开源进展 欢迎留言互动&#xff5e; SOFAStack&#xff08;Scalable Open Financial Architecture Stack&#xff09;是蚂蚁集团自主研发的金融级云原生架构&#xff0c;包含了构建金融级云原生架构所需的各个组件&am…