1网站免费建站推广之家app
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 配置