当前位置：首页 > news >正文

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

news 来源：原创 2025/5/16 0:14:08

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文件）