JavaWeb04-Vue项目开发学习笔记1

开发模式

前后端混合开发

缺点：沟通成本高、分工不明确、不便管理、不便于扩展。

前后端分离开发：可以解决前后端混合开发的缺点。

开发过程：

需求分析->接口定义->前后端并行开发->测试（前后端单独进行）->前后端联调测试。

YApi

介绍：YApi是高效、易用、功能强大的 api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。

用途：API接口管理、Mock服务。

基础功能：

前端开发特点

前端工程化

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

模块化：js、css独立为容易复用的模块。

组件化：使用UI结构、样式、行为等组件进行开发。

规范化：目录结构、编码、接口均有统一的规范。

自动化：构建、部署、测试等自动化进行。

Vue-cli 脚手架

介绍：Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

lVue-cli提供了如下功能：

u统一的目录结构

u本地调试

u热部署

u单元测试

u集成打包上线

l依赖环境：NodeJS

NodeJS环境准备

Vue项目创建

方法一：命令行中输入：vue create vue-project01

方法二：图形化界面命令行输入：vue ui

Vue项目-目录结构

标准目录结构如下：

src下目录结构：

Vue项目启动

1.在vscode设置中搜索 Package Manager 调成npm，重启VScode即可。

2.点击serve vue-cli

方法二：在当前项目的终端输入命令：

npm run serve

修改Vue项目的端口号

在vue.config.js文件中添加配置

Vue项目开发流程

Vue的组件文件以 .vue结尾，每个组件由三个部分组成：<template> 、<script>、<style> 。