目录
1Vue基础
1.1环境要求
1.2 操作过程
1.3 工程结构
1.4 启动前端服务
vue%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F-toc" style="margin-left:80px;">2 vue基本使用方式
vue%20%E7%BB%84%E4%BB%B6-toc" style="margin-left:120px;">2.1 vue 组件
2.2 文本插值
2.3 属性绑定
2.4 事件绑定
2.5 双向绑定
2.6 条件渲染
2.7 axios
1Vue基础
1.1环境要求
要想基于脚手架创建前端工程，需要具备如下环境要求：
-
node.js 前端项目的运行环境
-
npm JavaScript的包管理工具
-
Vue CLI 基于Vue进行快速开发的完整系统，实现交互式的项目脚手架
安装完node.js后，可以通过命令行来查看版本号，如下：
安装 Vue CLI，命令如下：
1.2 操作过程
使用 Vue CLI 创建前端工程的方式：
第一步：在命令行输入命令 vue ui,在浏览器ui界面中选择前端工程存放的位置
第二步：点击“在此创建新项目”按钮，跳转到创建新项目设置页面 
第三步：填写项目名称、选择包管理器为npm，点击“下一步”按钮 
第四步：选择 Default(Vue 2)，点击"创建项目"按钮，完成项目的创建（期间需要连网 创建时间会比较久） 
1.3 工程结构
工程目录结构：
重点文件或目录介绍：
-
node_modules：当前项目依赖的js包
-
assets：静态资源存放目录
-
components：公共组件存放目录
-
App.vue：项目的主组件，页面的入口文件
-
main.js：整个项目的入口文件
-
package.json：项目的配置信息、依赖包管理
1.4 启动前端服务
访问前端工程：
注：要停止前端服务，可以在命令行终端使用 ctrl + C
前端项目启动后，服务端口默认为8080，很容易和后端tomcat端口号冲突。如何修改前端服务的端口号？
vue%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F">2 vue基本使用方式
-
vue 组件
-
文本插值
-
属性绑定
-
事件绑定
-
双向绑定
-
条件渲染
-
axios
vue%20%E7%BB%84%E4%BB%B6">2.1 vue 组件
Vue 的组件文件以 .vue 结尾，每个组件由三部分组成：
-
结构 <template>
-
样式 <style>
-
逻辑 <script>
2.2 文本插值
作用：用来绑定 data 方法返回的对象属性
用法：{{插值表达式}}
2.3 属性绑定
作用：为标签的属性绑定 data 方法中返回的属性
用法：v-bind:xxx，简写为 :xxx
2.4 事件绑定
作用：为元素绑定对应的事件
用法：v-on:xxx，简写为 @xxx
2.5 双向绑定
作用：表单输入项和 data 方法中的属性进行绑定，任意一方改变都会同步给另一方
用法：v-model
2.6 条件渲染
作用：根据表达式的值来动态渲染页面元素
用法：v-if、v-else、v-else-if
2.7 axios
Axios 是一个基于 promise 的 网络请求库，作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求。
安装命令：npm install axios
导入：import axios from 'axios'
参数说明：
-
url：请求路径
-
data：请求体数据，最常见的是JSON格式数据
-
config：配置对象，可以设置查询参数、请求头信息
注：在使用axios时，经常会遇到跨域问题。为了解决跨域问题，可以在 vue.config.js 文件中配置代理：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 7070,
proxy: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': ''
}
}
}
}
})axios的post请求示例
axios.post('/api/admin/employee/login',{
username:'admin',
password: '123456'
}).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error.response)
})axios的get请求示例：
axios.get('/api/admin/shop/status',{
headers: {
token: ‘xxx.yyy.zzz’
}
})axios提供的统一使用方式（可以发送各种方式的请求）：
axios({
url: '/api/admin/employee/login',
method:'post',
data: {
username:'admin',
password: '123456'
}
}).then((res) => {
console.log(res.data.data.token)
axios({
url: '/api/admin/shop/status',
method: 'get',
params: {id: 100},
headers: {
token: res.data.data.token
}
})
}).catch((error) => {
console.log(error)
})
