vue框架技术相关概述以及前端框架整合

vue框架技术概述及前端框架整合

1 node.js

介绍:什么是node.js
Node.js就是运行在服务端的JavaScript。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎。

作用

1 运行java需要安装JDK,而Node.js是JavaScript的运行环境,用于执行JavaScript代码的环境。
2 后端服务可以使用Tomcat服务器来运行,前端可以使用Node.js模拟出服务器的效果来运行。

浏览器的内核组成

1.DOM渲染引擎
2.js解析器(js引擎)
浏览器中有内核,内核中有js引擎,js引擎可以运行js,所以使用node.js可以脱离浏览器环境来执行js程序。

2 NPM

介绍

NPM全称是Node Package Manager,是Node.js包管理工具,也是node.js的包管理工具,相当于前端的maven。node.js已经集成了npm工具。

3 前端快速构建框架使用

(1)vue-element-admin

它是基于Element-ui与Vue的套后台管理系统集成解决方案。(里面功能有些多)
GitHub地址:https://github.com/PanjiaChen/vue-element-admin

(2)vue-admin-template

它是vue-element-admin后台管理系统的极简版,可作为基础模版进行二次开发。
GitHub地址:https://github.com/PanjiaChen/vue-admin-template
(如果极简版有些功能没有,可以从vue-element-admin的源码中去查找)

(3)Element-ui 是饿了么前端出品的基于 Vue.js 的后台组件库,方便程序员进行页面快速布局和构建。

官网:https://element.eleme.cn/#/zh-CN

4 vue框架的前端项目介绍

(1)打开前端项目,打开终端执行命令(下载相关的依赖包)

  ```shellnpm install```
# 启动前端项目
npm run dev(指定对应的环境)

使用npm下载完依赖包后,会出现一个node_modules文件夹(一般想对大一些)。(这个进行项目管理的时候,不需要提交,其他人拉下项目后,自己下载依赖包即可)

(2)改造项目信息(这些信息最好可以修改)

<1> 修改项目中的src/settings.js文件信息
# 对应着网页左上角的那个小字体
title:自己的项目     

在这里插入图片描述

<2> 修改 src/main.js 文件信息
 ## 修改第7行,末尾的 en 改为 zh-CN 系统变为使用中文语言环境,例如:日期时间组件
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
<3> 修改前端项目的端口号(默认是9528端口)修改vue.config.js 文件
// ## 第16行 9528端口
const port = process.env.port || process.env.npm_config_port || 9528                               // dev port
<4> 如果不习惯Eslint语法检查工具可关闭:.eslintignore 文件(在多编写空格 tab以及//紧接着增加注释时会报红线)

需要在文件最后一行加上*号

build/*.js
src/assets
public
dist
*
<5> 修改访问后端接口地址的.env.development文件信息

通常指向nginx的地址

# base api  访问后端接口路径 开发环境 -- 实际上是前端发往windows的nginx中的  因为微服务有多个 前端只能发往一个端口地址(采用中间代理)
# VUE_APP_BASE_API = '/dev-api'  原先是这个  
VUE_APP_BASE_API = 'http://localhost:9001'               # 9001是本地nginx的端口号--里面有反向代理
<6> 注意api文件夹中的user.js文件信息
<7> 注意跨域问题(1个请求另一个时,只要协议、域名、端口号任意一个不一致,就会出现跨域问题)

如:http://locahost:9527前端项目访问http://localhost:8080后端服务,由于端口不一致,会导致跨域问题。(后期可通过网关来解决)前后端不分离的项目不需要考虑跨域问题。

可在controller层添加@CrossOrign解决。

<8> 配置路由相关信息(修改src/router/index.js文件)

在这里插入图片描述

export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),  //跳到登录页面//当设置 true 的时候该路由不会再侧边栏出现 如401,login等页面,或者如一些编辑页面/edit/1hidden: true},{path: '/404',component: () => import('@/views/404'), //找不到页面,左边栏不会出现hidden: true},{//登录成功之后 将路由推到这里/path: '/',component: Layout,  //Layout表示在左边的redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: { title: 'Dashboard', icon: 'dashboard' }}]},//多级菜单路由 -- 设置系统多级菜单   下面的都是没有用的 改成自己的{path: '/pms',   //对应文件的路径  前端对应着nginx中配置的东西 如:点击这个路由 localhost:9001/pms  会自动根据pms来转发到对应的微服务中component: Layout,  //表示主布局的意思name: 'pms',  //每个路由的name不能相同meta: {title: '生产管理系统'},  //左边点击的菜单名字        **主菜单名字 1级菜单**children: [{path: '/proddisp',   //根据这个路径 不是页面就在下面加上<router-view></router-view>      **2级菜单**component: () => import('@/views/pms/proddisp'),    name: 'proddisp',meta: {title: '生产调度'},  //下面有目录 不是页面 需要index.vue指定路由children: [{path: '/dispordman',component: () => import('@/views/pms/proddisp/dispordman'),  // **3级菜单**name: 'dispordman',meta: {title: '调度指令管理'},   //下面有目录 不是页面 需要index.vue指定路由alwaysShow: true,  //显示所有子集children: [{path: '/dispord/list',  //对应页面之间的跳转name: 'PmsDispOrdList',component: () => import('@/views/pms/proddisp/dispordman/dispord/list'),   //是页面  对应着的是vue中的文件路径(新建就可以)meta: {title: '调度指令库管理', icon: 'table'}  },{path: '/dispordrls/list',name: 'PmsDispOrdRlsList',component: () => import('@/views/pms/proddisp/dispordman/dispordrls/list'), //是页面 下划线就没有了meta: { title: '调度指令管理', icon: 'table' }},{path: '/dispord/update/:id',    // 对应修改页面中的this.$route.params.idname: 'PmsDispOrdUpdate',component: () => import('@/views/pms/proddisp/dispordman/dispord/update'),meta: {title: '编辑调度指令库',noCache: true},hidden: true   //修改页面隐藏 不在菜单栏出现}]}]}]},
<9> 创建router-view

在 /pms/proddisp 2级目录下创建index.vue文件
在/pms/proddisp/dispordman 3级目录下创建index.vue文件
在这里插入图片描述
index.vue中写上以下信息:

<template><router-view/>
</template>

(3)目录结构

├── build                      # 构建编译
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # logo
│   └── index.html             # 基础模板
├── src                        # 项目源代码
│   ├── api                    # 各种接口,包含所有请求
│   ├── assets                 # 图片字体等静态资源
│   ├── components             # 全局公用组件,非公共组件在各自页面下维护
│   ├── icons                  # 矢量图标库
│   ├── layout                 # 布局
│   ├── router                 # 路由
│   ├── store                  # 全局存储管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用工具,非公共工具在各自页面下维护
│   ├── views                  # 所有页面
│   ├── App.vue                # 项目顶层组件
│   ├── main.js                # 项目入口文件 加载组件 初始化等
│   └── permission.js          # 认证入口
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babel.config.js           # 语法转换器配置
├── package.json               # 项目信息和依赖配置
└── vue.config.js              # vue-cli 配置

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI】Deepseek本地部署探索,尝试联网搜索

前言 1月下旬&#xff0c;Deepseek-R1横空出世&#xff0c;其依靠堪比GPT-o1的推理能力&#xff0c;训练成本及使用成本均只有gpt几十分之一甚至百分之一的超高性价比&#xff0c;以及它足够“OPEN”的特性直接暴打人工智能的资本行业&#xff0c;本着求实求新的精神&#xff…

DeepSeek介绍

目录 前言 1.介绍一下你自己 2.什么是CUDA CUDA的核心特点&#xff1a; CUDA的工作原理&#xff1a; CUDA的应用场景&#xff1a; CUDA的开发工具&#xff1a; CUDA的局限性&#xff1a; 3.在AI领域&#xff0c;PTX是指什么 1. PTX 的作用 2. PTX 与 AI 的关系 3. …

WGCLOUD服务器资源监控软件使用笔记 - Token is error是什么错误

[wgcloud-agent]2025/01/30 10:41:30 WgcloudAgent.go:90: 主机监控信息上报server开始 [wgcloud-agent]2025/01/30 10:41:30 WgcloudAgent.go:99: 主机监控信息上报server返回信息: {"result":"Token is error"} 这个错误是因为agent配置的wgToken和serv…

OpenAI-Edge-TTS:本地化 OpenAI 兼容的文本转语音 API,免费高效!

文本转语音&#xff08;TTS&#xff09;技术已经成为人工智能领域的重要一环&#xff0c;无论是语音助手、教育内容生成&#xff0c;还是音频文章创作&#xff0c;TTS 工具都能显著提高效率。今天要为大家介绍的是 OpenAI-Edge-TTS&#xff0c;一款基于 Microsoft Edge 在线文本…

Leetcode 131 分割回文串(纯DFS)

131. 分割回文串https://leetcode.cn/problems/palindrome-partitioning/https://leetcode.cn/problems/palindrome-partitioning/ 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1&#xff1a…

服务器虚拟化技术详解与实战:架构、部署与优化

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 引言 在现代 IT 基础架构中&#xff0c;服务器虚拟化已成为提高资源利用率、降低运维成本、提升系统灵活性的重要手段。通过服务…

记录一次,PyQT的报错,多线程Udp失效,使用工具如netstat来检查端口使用情况。

1.问题 报错Exception in thread Thread-1: Traceback (most recent call last): File "threading.py", line 932, in _bootstrap_inner File "threading.py", line 870, in run File "main.py", line 456, in udp_recv IndexError: list…

【PyTorch】6.张量运算函数:一键开启!PyTorch 张量函数的宝藏工厂

目录 1. 常见运算函数 个人主页&#xff1a;Icomi 专栏地址&#xff1a;PyTorch入门 在深度学习蓬勃发展的当下&#xff0c;PyTorch 是不可或缺的工具。它作为强大的深度学习框架&#xff0c;为构建和训练神经网络提供了高效且灵活的平台。神经网络作为人工智能的核心技术&…

线段树 算法

文章目录 基础知识适用场景小结 题目概述题目详解300.最长递增子序列2407.最长递增子序列 II 基础知识 线段树和树状数组都只是一个工具来的&#xff0c;题目并不会一下子就告诉你这个题目用到线段树和树状数组&#xff0c;这个取决于你想使用的数据结构以及所要优化的方向 线…

JVM_类的加载、链接、初始化、卸载、主动使用、被动使用

①. 说说类加载分几步&#xff1f; ①. 按照Java虚拟机规范,从class文件到加载到内存中的类,到类卸载出内存为止,它的整个生命周期包括如下7个阶段: 第一过程的加载(loading)也称为装载验证、准备、解析3个部分统称为链接(Linking)在Java中数据类型分为基本数据类型和引用数据…

SpringBoot+Vue的理解(含axios/ajax)-前后端交互前端篇

文章目录 引言SpringBootThymeleafVueSpringBootSpringBootVue&#xff08;前端&#xff09;axios/ajaxVue作用响应式动态绑定单页面应用SPA前端路由 前端路由URL和后端API URL的区别前端路由的数据从哪里来的 Vue和只用三件套axios区别 关于地址栏url和axios请求不一致VueJSPS…

socket实现HTTP请求,参考HttpURLConnection源码解析

背景 有台服务器&#xff0c;网卡绑定有2个ip地址&#xff0c;分别为&#xff1a; A&#xff1a;192.168.111.201 B&#xff1a;192.168.111.202 在这台服务器请求目标地址 C&#xff1a;192.168.111.203 时必须使用B作为源地址才能访问目标地址C&#xff0c;在这台服务器默认…

Hive:复杂数据类型之Map函数

Map函数 是Hive里面的一种复杂数据类型, 用于存储键值对集合。Map中的键和值可以是基础类型或复合类型&#xff0c;这使得Map在处理需要关联存储信息的数据时非常有用。 定义map时,需声明2个属性: key 和 value , map中是 key value 组成一个元素 key-value, key必须为原始类…

项目集成GateWay

文章目录 1.环境搭建1.创建sunrays-common-cloud-gateway-starter模块2.目录结构3.自动配置1.GateWayAutoConfiguration.java2.spring.factories 3.pom.xml4.注意&#xff1a;GateWay不能跟Web一起引入&#xff01; 1.环境搭建 1.创建sunrays-common-cloud-gateway-starter模块…

【C++高并发服务器WebServer】-9:多线程开发

本文目录 一、线程概述1.1 线程和进程的区别1.2 线程之间共享和非共享资源1.3 NPTL 二、线程操作2.1 pthread_create2.2 pthread_exit2.3 pthread_join2.4 pthread_detach2.5 patch_cancel2.6 pthread_attr 三、实战demo四、线程同步五、死锁六、读写锁七、生产消费者模型 一、…

python学opencv|读取图像(四十七)使用cv2.bitwise_not()函数实现图像按位取反运算

【0】基础定义 按位与运算&#xff1a;两个等长度二进制数上下对齐&#xff0c;全1取1&#xff0c;其余取0。按位或运算&#xff1a;两个等长度二进制数上下对齐&#xff0c;有1取1&#xff0c;其余取0。 按位取反运算&#xff1a;一个二进制数&#xff0c;0变1,1变0。 【1】…

初二回娘家

昨天下午在相亲相爱一家人群里聊天&#xff0c;今天来娘家拜年。 聊天结束后&#xff0c;开始准备今天的菜肴&#xff0c;梳理了一下&#xff0c;凉菜&#xff0c;热菜&#xff0c;碗菜。 上次做菜&#xff0c;粉丝感觉泡的不透&#xff0c;有的硬&#xff0c;这次使用开水浸泡…

“星门计划对AI未来的意义——以及谁将掌控它”

“星门计划对AI未来的意义——以及谁将掌控它” 图片由DALL-E 3生成 就在几天前&#xff0c;唐纳德特朗普宣布了“星门计划”&#xff0c;OpenAI随即跟进&#xff0c;分享了更多细节。他们明确表示&#xff0c;计划在未来四年内投资5000亿美元&#xff0c;在美国为OpenAI构建一…

内外网文件摆渡企业常见应用场景和对应方案

在如今的企业环境中&#xff0c;内外网文件摆渡的需求越来越常见&#xff0c;也变得越来越重要。随着信息化的不断推进&#xff0c;企业内部和外部之间的数据交换越来越频繁&#xff0c;如何安全、高效地进行文件传输成了一个关键问题。今天&#xff0c;咱就来聊聊内外网文件摆…

2025一区新风口:小波变换+KAN!速占!

今天给大家分享一个能让审稿人眼前一亮&#xff0c;好发一区的idea&#xff1a;小波变换KAN&#xff01; 一方面&#xff1a;KAN刚中稿ICLR25&#xff0c;正是风口上&#xff0c;与小波变换的结合还处于起步阶段&#xff0c;正是红利期&#xff0c;创新空间广阔。 另一方面&a…