本篇文章主要带你了解一下什么是前端工程化,并带你快速使用Vue脚手架创建和启动Vue项目。
Ajax(Asynchronous JavaScript And XML),即异步的JavaScript和XML。
1)数据交换: 通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
2)异步交互: 可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等。
注:同步与异步的区别,如下
Axios对原生的Ajax进行了封装,简化书写,快速开发。
中文官网:https://www.axios-http.cn/
1)步骤如下
2)通过Axios请求方式别名发起get和post请求(推荐)
所谓前端工程化,是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
1)简述
YApi是高效、易用、功能强大的api管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。
官网:https://yapi.pro/
使用文档:https://hellosean1025.github.io/yapi/
注册登录进去后如下,会有指引提示,不懂的也可以查看使用文档。
2)演示使用
2.1)添加项目
2.2)添加分类
在添加接口前先添加分类,便于对接口进行管理,比如要对用户的接口进行管理,可以添加一个用户管理的分类,如下。
2.3)添加接口
2.4)编辑完善
添加完成后,点击编辑,编辑如下。
a、请求参数设置
b、返回数据设置
设置返回参数,即未来前端人员在调用这个接口的时候返回数据的格式是怎么样的。可以设置返回一个json格式的数据,如下
并为各字段添加备注信息,完成后点击保存即可
c、点击预览查看
推荐下载一个插件:FeHelper,能够json自动格式化
接口管理好以后,会自动生成一个Mock地址,将来前端人员在测试时就可以直接访问该地址,会自动生成Mock测试数据。
注:Mock 是模拟真实 API 请求的一种方式,广泛应用于对接和测试。
如下,可以看出返回的数据不太好看
可以点击高级Mock,添加我们期望返回的数据。
再次访问Mock地址时,就会按我们添加的期望数据返回测试数据。
因为我设置的是开放的,所有人都能访问该Mock地址,如下
Mock地址:https://yapi.pro/mock/290026/user/getById
1)简述
Vue-cli是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板。
2)功能
Vue-cli提供了如下功能
依赖环境:Nodejs
1)下载安装
官网:https://nodejs.org/en
2)验证Nodejs的环境变量
安装完成后,win+R输入cmd打开命令提示符,输入 node -v,若成功显示版本号,说明安装成功。
3)配置npm的全局安装路径
我的已经配置过了,没有配置的看下面操作即可。搜索框搜索cmd,以管理员的身份打开命令提示符,输入如下命令
npm config set prefix "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Node.js"
我的Nodejs安装路径为:C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Node.js,上面根据自己的替换即可。
可能有的人安装之后忘记了自己的安装路径在哪,这里说一下快速查找安装路径的方法,如下图示。
4)切换npm的淘宝镜像
配置淘宝npm镜像,解决模块安装缓慢或者失败的问题,加速资源下载。
以管理员的身份打开命令提示符,输入如下命令
npm config set registry https://registry.npmmirror.com
以管理员的身份打开命令提示符,输入如下命令
npm install -g @vue/cli
安装可能需要一些时间,安装好后,输入 vue --version验证,显示版本号即说明安装成功。
有两种方式创建vue项目,分别是图形化界面和命令行方式创建。这里介绍图形化界面方式创建。
1)在桌面上新建一个文件夹,命名为vue,进入文件夹,在搜索栏上输入cmd敲回车,进入该文件夹的命令提示符。输入 vue ui 调出vue的图形化界面。
2)点击创建 ->在此创建新项目
3)下一步 ->选择手动预设 ->下一步 ->开启Router路由
4)下一步 ->选择vue的版本(2.x) ->创建项目 ->创建项目,不保存预设。
上述设置完成后,就会联网创建项目。可以在命令行中看到进度情况,也可以在图形化界面中查看。
创建完成后,如下
创建完成后,使用 VSCode打开桌面上创建好的vue文件夹。基于Vue脚手架创建出来的工程,有标准的目录结构,如下
有两种方式运行Vue项目,分别是图形化界面和命令行方式。
1)图形化界面方式
注:VSCode侧边栏没有显示NPM脚本的,按ctrl+shift+p,搜索npm,选择资源管理器,点击一下就会出现了,如下。
点击三角形按钮运行
访问http://localhost:8081/,效果如下
2)命令行方式
进入该Vue项目的目录里面,在目录搜索栏上输入cmd敲回车,进入该目录的命令提示符。输入如下命令启动vue
npm run serve
3)Vue项目的热部署功能
将App.vue文件里的 Home改为 Vue Home,直接ctrl+s保存,不重启项目。
再回去看网页,发现发生了变化
4)Vue项目的端口配置
由于我们启动Java项目用到的Tomcat服务器默认占用的端口就是8080端口,所以这里我们配置一下Vue项目的端口。
在 vue.config.js文件内添加如下代码,并ctrl+s保存
devServer: {
port: 7000
}
按ctrl+c终止原服务,再次启动项目
浏览器访问http://localhost:7000/,成功访问。说明端口配置成功!
Vue的组件文件以.vue结尾,每个组件由三个部分组成:<template>,<script>,<style> 。