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

  ```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 配置