黄江网站设计_360推广客服_企业网站制作教程_推广普通话手抄报内容大全

2026/1/21 8:15:48 来源：https://blog.csdn.net/liangmeirong123/article/details/142903962 浏览: 次关键词：黄江网站设计_360推广客服_企业网站制作教程_推广普通话手抄报内容大全

文章目录

1.YApi
- 1.1YApi的概念
- 1.2YApi的作用
2.前段工程化的特点
3.环境准备
- 3.1Vue-cil
- - 3.1.1Vue-cil的功能
4.Vue项目
- 4.1Vue项目创建
- 4.2Vue项目目录的介绍
- 4.3运行Vue项目
- 4.4Vue项目-配置端口
- 4.5Vue项目的开发流程

1.YApi

1.1YApi的概念

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
网页:[YApi Pro-高效、易用、功能强大的可视化接口管理平台](https://yapi.pro/)

1.2YApi的作用

接口管理
Mock服务

2.前段工程化的特点

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

模块化:JS,CSS
组件化:UI结构,样式,行为
规范化:目录结构,编码,接口
自动化:构建,部署,测试

3.环境准备

3.1Vue-cil

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

3.1.1Vue-cil的功能

统一的目录结构
本地调试
热部署
单元测试
集成打包上线
依赖环境:NodeJS

4.Vue项目

4.1Vue项目创建

命令行:vue create vue-project01
图形化界面:vue ui

![[Pasted image 20240818203012.png]]

![[Pasted image 20240818203332.png]]

![[Pasted image 20240818203540.png]]

![[Pasted image 20240818204318.png]]

4.2Vue项目目录的介绍

基于Vue脚手架创建出来的工程,有标准的目录结构,如图所示:
![[Pasted image 20240818204930.png]]

src目录的子文件
![[Pasted image 20240818205243.png]]

4.3运行Vue项目

方式一:图形化界面
![[Pasted image 20240818210111.png]]

在这里插入图片描述

方式二:命令行
![[Pasted image 20240818211316.png]]

4.4Vue项目-配置端口

更改端口号-8080为7000

![[Pasted image 20240818212850.png]]

4.5Vue项目的开发流程

import:导入模块
export:导出模块

Vue的组件以vue结尾,每个组件由三个部分组成:<template>,<script>,<style>
![[Pasted image 20240819144430.png]]
在这里插入图片描述

黄江网站设计_360推广客服_企业网站制作教程_推广普通话手抄报内容大全

文章目录

1.YApi

1.1YApi的概念

1.2YApi的作用

2.前段工程化的特点

3.环境准备

3.1Vue-cil

3.1.1Vue-cil的功能

4.Vue项目

4.1Vue项目创建

4.2Vue项目目录的介绍

4.3运行Vue项目

4.4Vue项目-配置端口

4.5Vue项目的开发流程

最新新闻

热搜词