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

news2025/3/9 8:05:00

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)打开前端项目,打开终端执行命令(下载相关的依赖包)

  ```shell
  npm 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/1
    hidden: 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.id
                name: '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.coloradmin.cn/o/2289758.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构 树2

文章目录 前言 一&#xff0c;二叉搜索树的高度 二&#xff0c;广度优先VS深度优先 三&#xff0c;广度优先的代码实现 四&#xff0c;深度优先代码实现 五&#xff0c;判断是否为二叉搜索树 六&#xff0c;删除一个节点 七&#xff0c;二叉收索树的中序后续节点 总结 …

NeetCode刷题第19天(2025.1.31)

文章目录 099 Maximum Product Subarray 最大乘积子数组100 Word Break 断字101 Longest Increasing Subsequence 最长递增的子序列102 Maximum Product Subarray 最大乘积子数组103 Partition Equal Subset Sum 分区等于子集和104 Unique Paths 唯一路径105 Longest Common Su…

Google Chrome-便携增强版[解压即用]

Google Chrome-便携增强版 链接&#xff1a;https://pan.xunlei.com/s/VOI0OyrhUx3biEbFgJyLl-Z8A1?pwdf5qa# a 特点描述 √ 无升级、便携式、绿色免安装&#xff0c;即可以覆盖更新又能解压使用&#xff01; √ 此增强版&#xff0c;支持右键解压使用 √ 加入Chrome增强…

[EAI-027] RDT-1B,目前最大的用于机器人双臂操作的机器人基础模型

Paper Card 论文标题&#xff1a;RDT-1B: a Diffusion Foundation Model for Bimanual Manipulation 论文作者&#xff1a;Songming Liu, Lingxuan Wu, Bangguo Li, Hengkai Tan, Huayu Chen, Zhengyi Wang, Ke Xu, Hang Su, Jun Zhu 论文链接&#xff1a;https://arxiv.org/ab…

[EAI-028] Diffusion-VLA,能够进行多模态推理和机器人动作预测的VLA模型

Paper Card 论文标题&#xff1a;Diffusion-VLA: Scaling Robot Foundation Models via Unified Diffusion and Autoregression 论文作者&#xff1a;Junjie Wen, Minjie Zhu, Yichen Zhu, Zhibin Tang, Jinming Li, Zhongyi Zhou, Chengmeng Li, Xiaoyu Liu, Yaxin Peng, Chao…

DIFY源码解析

偶然发现Github上某位大佬开源的DIFY源码注释和解析&#xff0c;目前还处于陆续不断更新地更新过程中&#xff0c;为大佬的专业和开源贡献精神点赞。先收藏链接&#xff0c;后续慢慢学习。 相关链接如下&#xff1a; DIFY源码解析

hexo部署到github page时,hexo d后page里面绑定的个人域名消失的问题

Hexo 部署博客到 GitHub page 后&#xff0c;可以在 setting 中的 page 中绑定自己的域名&#xff0c;但是我发现更新博客后绑定的域名消失&#xff0c;恢复原始的 githubio 的域名。 后面搜索发现需要在 repo 里面添加 CNAME 文件&#xff0c;内容为 page 里面绑定的域名&…

【Block总结】MAB,多尺度注意力块|即插即用

文章目录 一、论文信息二、创新点三、方法MAB模块解读1、MAB模块概述2、MAB模块组成3、MAB模块的优势 四、效果五、实验结果六、总结代码 一、论文信息 标题: Multi-scale Attention Network for Single Image Super-Resolution作者: Yan Wang, Yusen Li, Gang Wang, Xiaoguan…

移动互联网用户行为习惯哪些变化,对小程序的发展有哪些积极影响

一、碎片化时间利用增加 随着生活节奏的加快&#xff0c;移动互联网用户的碎片化时间越来越多。在等公交、排队、乘坐地铁等间隙&#xff0c;用户更倾向于使用便捷、快速启动的应用来满足即时需求。小程序正好满足了这一需求&#xff0c;无需下载安装&#xff0c;随时可用&…

使用 Tauri 2 + Next.js 开发跨平台桌面应用实践:Singbox GUI 实践

Singbox GUI 实践 最近用 Tauri Next.js 做了个项目 - Singbox GUI&#xff0c;是个给 sing-box 用的图形界面工具。支持 Windows、Linux 和 macOS。作为第一次接触这两个框架的新手&#xff0c;感觉收获还蛮多的&#xff0c;今天来分享下开发过程中的一些经验~ 为啥要做这个…

攻防世界_simple_php

同类型题&#xff08;更难版->&#xff09;攻防世界_Web(easyphp)&#xff08;php代码审计/json格式/php弱类型匹配&#xff09; php代码审计 show_source(__FILE__)&#xff1a;show_source() 函数用于显示指定文件的源代码&#xff0c;并进行语法高亮显示。__FILE__ 是魔…

C++哈希(链地址法)(二)详解

文章目录 1.开放地址法1.1key不能取模的问题1.1.1将字符串转为整型1.1.2将日期类转为整型 2.哈希函数2.1乘法散列法&#xff08;了解&#xff09;2.2全域散列法&#xff08;了解&#xff09; 3.处理哈希冲突3.1线性探测&#xff08;挨着找&#xff09;3.2二次探测&#xff08;跳…

Solon Cloud Gateway 开发:导引

Solon Cloud Gateway 是 Solon Cloud 体系提供的分布式网关实现&#xff08;轻量级实现&#xff09;。 分布式网关的特点&#xff08;相对于本地网关&#xff09;&#xff1a; 提供服务路由能力提供各种拦截支持 1、分布式网关推荐 建议使用专业的分布式网关产品&#xff0…

dmfldr实战

dmfldr实战 本文使用达梦的快速装载工具&#xff0c;对测试表进行数据导入导出。 新建测试表 create table “BENCHMARK”.“TEST_FLDR” ( “uid” INTEGER identity(1, 1) not null , “name” VARCHAR(24), “begin_date” TIMESTAMP(0), “amount” DECIMAL(6, 2), prim…

Spring AOP 入门教程:基础概念与实现

目录 第一章&#xff1a;AOP概念的引入 第二章&#xff1a;AOP相关的概念 1. AOP概述 2. AOP的优势 3. AOP的底层原理 第三章&#xff1a;Spring的AOP技术 - 配置文件方式 1. AOP相关的术语 2. AOP配置文件方式入门 3. 切入点的表达式 4. AOP的通知类型 第四章&#x…

Upscayl-官方开源免费图像AI增强软件

upscayl 链接&#xff1a;https://pan.xunlei.com/s/VOI0Szqe0fCwSSUSS8zRqKf7A1?pwdhefi#

SpringBoot Web开发(SpringMVC)

SpringBoot Web开发&#xff08;SpringMVC) MVC 核心组件和调用流程 Spring MVC与许多其他Web框架一样&#xff0c;是围绕前端控制器模式设计的&#xff0c;其中中央 Servlet DispatcherServlet 做整体请求处理调度&#xff01; . 除了DispatcherServletSpringMVC还会提供其他…

苍穹外卖第一天

角色分工 技术选型 pojo子模块 nginx反向代理 MD5密码加密

C# Winform enter键怎么去关联button

1.关联按钮上的Key事件按钮上的keypress&#xff0c;keydown&#xff0c;keyup事件随便一个即可private void textBox1_KeyDown(object sender, KeyEventArgs e){if (e.KeyCode Keys.Enter){this.textBox2.Focus();}}2.窗体上的事件private void textBox2_KeyPress(object sen…

LeGO LOAM坐标系问题的自我思考

LeGO LOAM坐标系问题的自我思考 IMU坐标系LeGO LOAM代码分析代码 对于IMU输出测量值的integration积分过程欧拉角的旋转矩阵VeloToStartIMU()函数TransformToStartIMU(PointType *p) IMU坐标系 在LeGO LOAM中IMU坐标系的形式采用前(x)-左(y)-上(z)的形式&#xff0c;IMU坐标系…