1VUE基于脚手架创建前端工程

目录

1Vue基础

1.1环境要求

1.2 操作过程

1.3 工程结构

1.4 启动前端服务

2 vue基本使用方式

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 create 项目名称

• 方式二：vue ui

重点介绍使用 vue ui 命令创建前端工程的过程：

第一步：在命令行输入命令 vue ui,在浏览器ui界面中选择前端工程存放的位置

 第二步：点击“在此创建新项目”按钮，跳转到创建新项目设置页面 第三步：填写项目名称、选择包管理器为npm，点击“下一步”按钮 第四步：选择 Default(Vue 2)，点击"创建项目"按钮，完成项目的创建（期间需要连网 创建时间会比较久） 

1.3 工程结构

工程目录结构：

重点文件或目录介绍：

• node_modules：当前项目依赖的js包

• assets：静态资源存放目录

• components：公共组件存放目录

• App.vue：项目的主组件，页面的入口文件

• main.js：整个项目的入口文件

• package.json：项目的配置信息、依赖包管理

• vue.config.js：vue-cli配置文件

1.4 启动前端服务

使用VS Code打开创建的前端工程，启动前端工程：

访问前端工程：

注：要停止前端服务，可以在命令行终端使用 ctrl + C

前端项目启动后，服务端口默认为8080，很容易和后端tomcat端口号冲突。如何修改前端服务的端口号？

可以在vue.config.js中配置前端服务端口号：

2 vue基本使用方式

• vue 组件

• 文本插值

• 属性绑定

• 事件绑定

• 双向绑定

• 条件渲染

• axios

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)
    })