搜网站旧域名,邯郸wap网站建设费用,宁波seo关键词优化制作,久久建筑有限公司vue框架技术概述及前端框架整合
1 node.js
介绍#xff1a;什么是node.js Node.js就是运行在服务端的JavaScript。 Node.js是一个事件驱动I/O服务端JavaScript环境#xff0c;基于Google的V8引擎。
作用
1 运行java需要安装JDK#xff0c;而Node.js是JavaScript的运行环…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 前端快速构建框架使用
1vue-element-admin
它是基于Element-ui与Vue的套后台管理系统集成解决方案。里面功能有些多 GitHub地址https://github.com/PanjiaChen/vue-element-admin
2vue-admin-template
它是vue-element-admin后台管理系统的极简版可作为基础模版进行二次开发。 GitHub地址https://github.com/PanjiaChen/vue-admin-template 如果极简版有些功能没有可以从vue-element-admin的源码中去查找
3Element-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 i18n3 修改前端项目的端口号默认是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 的时候该路由不会再侧边栏出现 如401login等页面或者如一些编辑页面/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中写上以下信息
templaterouter-view/
/template3目录结构
├── 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 配置
