概述

首先我司最新的项目架构采用的是前后端分离模式，前端使用VUE框架，采用多页面开发，引入组件化设计思想，提高代码重用率进而提高开发效率；后台使用微服务治理。微服务工作在此前项目已经搭建完成，此次仅针对前端项目执行流程进行简要梳理。

流程

注意：如下流程的前提需要下载安装好node,以及ide-vscode

创建项目可参考官网：介绍 | Vue CLI
vs code打开项目根目录
设置npm注册指向到本地私服地址：npm config set registry http://ip:port/repository/(仓库地址可以设置为第三方地址，也可以为公司搭建的私服地址)
通过npm包管理器安装项目需要的插件：npm i //npm i = npm install，是安装各种包在dependencies中，也就是说生产和开发都会用到。
执行 npm run serve，即项目启动
访问：http://localhost:8080/页面所在包的名称

提示：在项目目录下的package.json中的rules里添加属性："no-unused-vars": "off",会消除一些不紧要的错误提示，但不加也不影响项目执行

扩展

单页面和多页面开发核心区别

传统系统开发的页面跳转其实大多数都是后端路由，在不同页面间进行请求跳转，属于多页面开发；而我们在使用Vue写的路由是属于前端路由，是用于实现组件间跳转的,最终都是挂在一个页面上，所以属于单页面应用。后端路由在跳转时会向服务器发送请求，而前端路由则不会向服务器发送请求。

单页面应用（spa）

概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。
优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。

多页面应用（mpa）

概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。
优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。
缺点：页面跳转较慢。

企业级VUE前端项目执行流程总结相关推荐

VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...
nginx配置vue项目500_一个Nginx部署多个vue前端项目总结
摘要: 近来接手了一个二次开发的前后端分离模式的项目,其中在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下,那么我们这里就要用到Nginx了,接下来我们看看如何在一个Nginx下部署2 ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
cmd搭建vue前端项目详细过程
cmd 搭建vue前端项目下载nods.js node.js下载(Windows版本) next 安装完毕! 配置node.js环境变量进入找到Path进入这里填你的node.js的安装路径验 ...
web前端项目上线流程是怎样的
web前端项目上线流程是怎样的? (1)流程建议模拟线上的开发环境本地反向代理线上真实环境开发即可.(apache,nginx,nodejs均可实现) 模拟线上的测试环境模拟线上的测试环境,其实 ...
Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
Vue前端项目自适应布局
Vue前端项目自适应布局一.单位尺寸二.基于rem实现自适应布局一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...
B站云E办Springboot+vue——前端项目完整版（含源码）
一.项目简介项目背景:受疫情的影响,许多企业由线上办公转为线下办公.随着线上办公的人数的增多,线上办公的优点逐步凸显:通过实现工作流程的自动化.节省企业办公费用.实现绿色办公,同时提升办公效率. 项 ...

企业级VUE前端项目执行流程总结

概述

流程

扩展

企业级VUE前端项目执行流程总结相关推荐

最新文章

热门文章