0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

复习笔记9-Vue Ajax Axios 前端工程化 Vue项目/组件/路由 打包部署 Maven依赖

Last updated at Posted at 2025-01-09

1.Vue(html,js,css的结合体,框架!)

①Vue入门三部曲

😊引入Vue.js文件
😊创建Vue核心对象,定义数据模型
😊编写视图
image.png

②常用指令

通过v-bind或者v-model绑定的变量,必须在数据模型中声明
image.png

③生命周期

mounted:挂载完成(发送请求到服务端,加载数据)

2.Ajax

⭐作用:
给服务器发送请求,并获取服务器响应的数据
异步交互:如搜索联想,用户名是否可用的校验等

3.Axios

①引入Axios的js文件
②使用Axios发送请求,并获取响应结果
image.png
image.png
image.png

4.前端工程化

环境准备:
下载:Nodejs
安装:vue-cli(用于快速生成一个Vue的项目模板)
image.png

5.Vue项目简介

命令行启动:npm run serve 终止:ctrl+c
⭐新建一个vue项目:
①建工程:文件夹内打开命令行,输入vue create 项目名称(vue-project01)
②在vscode中打开工程文件夹
③创建vue组件,输入三件套
😊三件套:
①< template > :html代码
②< script >:创建对象
③< style >:css样式
image.png

6.Vue组件库Element

https://element.eleme.io/#/zh-CN/component/installation
image.png
ctrl+alt+l:代码格式化

7.Vue路由

image.png

8.打包部署

⭐打包:
命令行:npm run build(打包出来的文件在dist中)
⭐部署:
①打包好的dist目录下的文件复制到NGINX的HTML文件夹中
②双击nginx文件

9.Maven依赖

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?