前端工程化(Vue)——Javaweb进阶学习（二）

前言

这部分很受用，不仅可以加快开发进度。而且在前端开发中，不至于写完

一、前后端如何开发

1.前后端混合开发

程序员即需要写前端代码技术，也要后端的技术开发。或者前端人员进行页面做完后，后端又要在前端页面进行修改

问题1：沟通成本比较高

问题2：分工不明确，后端既要开发前端又要开发后端

问题3：项目不便于管理

问题4：不便于维护和拓展

2.前后端分离开发

前后端可以先进行接口文档的书写，示例

（1）基本信息

（2）请求参数

（3）响应数据

撰写完接口文档后，前后端阅读接口文档分别进行开发

因此开发流程为：

二、YAPI

一个功能强大的api管理平台

1.添加一个项目

2.添加分类

方便后期管理

3.添加接口

设置分类啊，还有接口

4.完善接口

设置请求

5.测试

就可以通过这个接口获取信息

三、前端工程化开发

相当于maven一样

前端工程化：企业级的前端项目开发中，把前端开发工具所需的工具技术流程经验等进行规范化，标准化

模块化

        JS，CSS：制作成一个一个可以复用的模块

组件化

        可以将UI组件，将js的样式和组件进行管理

规范化

        目录结构和编码都是统一的

自动化

        构建，部署，测试

四、Vue前端工程化的脚手架——Vue-cli

一个脚手架，用于快速生成一个Vue的项目模板

Vue-cli提供的功能

        统一的目录结构

        本地调试

        热部署

        单元测试

        集成打包上线

（一）配置环境

依赖环境：NodeJS

        就是一个开源，跨平台的javascript运行时的环境

1.官网下载和安装

依照指示进行安装即可

输入node -v查看是否安装成功，环境是否配置ok

2.配置nmp

npm config set prefix "你的nodejs路径"

然后把set换成get查看是否配置成功

3.配置淘宝镜像

npm config set registry https://registry.npmmirror.com

4.下载脚手架

npm install -g @vue/cli 

查看是否安装成功

vue --version

（二）vue项目

1.创建vue项目

命令行方式：vue create vue-project

图形化界面:vue ui

图形化界面展示

然后进入想要放在项目的目录下进行创建

选择nmp即可

点击手动

再额外打开router

选择对应即可

展示这个页面就创建成功了

然后就创建成功一个项目了，这就是创建项目的目录结构

2.启动Vue项目

再vscode下方，点击运行，如果没有则crtl+shift+p输入npm也可以找到

或者再命令行直接输入

npm run server

在网页输入ip和端口即可看到这样即可成功

3.配置端口号

因为8080是tomcat的固定端口号，则尽量修改vue项目的端口号吧

在里面加入代码，设置端口为7000

（三）Vue的开发流程

默认首页：index.html

入口文件：main.js

默认首页默认导入入口文件

main.js中导入很多模块 

可以看到main.js里的vue这样写，其实就相当于前面学习的el了

看到main.js导入很多文件，其中.vue结尾的文件都是组件，APP.vue

组件的组成部分

其中大部分我们都是编写APP.vue页面