Vue CLI 静态资源管理

路径引用规则

在 Vue CLI 中，路径引用的场景：

如果 URL 是一个绝对路径，它将会被保留不变，可以引用 public 文件夹下的资源。
如果 URL 以 . 开头，它会被认为是相对模块请求，根据文档目录结构进行解析。
如果 URL 以 \~ 开头，其后的任何内容都会认为是模块请求，可以引用 node\_modules 文件夹下的资源。
如果 URL 以 @ 开头，它也会作为一个模块请求被解析，Vue CLI 默认别名 @ 表示 src 文件夹。

处理静态资源

静态资源可以通过两种方式进行处理：

放置在 src/assets 文件夹下的静态资源通过相对路径被引用，这类引用会被 webpack 处理。
放置在 public 文件夹下通过绝对路径被引用，这类资源将会直接被拷贝，而不会经过 webpack 的处理。

示例：加载图片

根组件（App.vue）：

<template>
    <div>
        <!-- 引用public文件夹下的avatar.png -->
        <img src="/avatar.png" style="width: 100px">

        <!-- 引用src/assets文件夹下的logo.png -->
        <img src="@/assets/logo.png" style="width: 100px">
    </div>
</template>

示例效果：

在 npm 配置文件（package.json）中执行 build 指令，项目打包，公共资源文件夹（public）下的静态资源不会被压缩，静态资源文件夹（src/assets）下的静态资源会被压缩。

网络请求

Axios 概述

Axios 是一个基于 Promise 的 HTTP 库，可以发送 GET、POST、PUT、DELETE 等请求。

Axios 文档：http://www.axios-js.com/

Axios 的主要特性：

支持所有的 API。
支持拦截请求和响应。
可以转换请求数据和响应数据，并可以将响应的内容自动转换为 JSON 类型的数据。
安全性高，客户端支持防御跨站请求伪造（CSRF）。

Axios 语法

Axios 发送 GET 请求的基本用法：

axios.get('请求路径')
    .then(ret => {
        // ret：包含请求和响应信息
        // ret.data：请求返回的数据结果
        // 请求成功执行函数
    }).catch(error => {
        // error：异常对象
        // 请求失败执行函数
    })

Axios 发送 POST 请求的基本用法：

axios.post('请求路径', 请求参数)
    .then(ret => {
        // ret：包含请求和响应信息
        // ret.data：请求返回的数据结果
        // 请求成功执行函数
    }).catch(error => {
        // error：异常对象
        // 请求失败执行函数
    })

Axios 发送 PUT 请求的基本用法：

axios.put(...)

Axios 发送 DELETE 请求的基本用法：

axios.delete(...)

Axios 初体验

在 Vue CLI 中使用 Axios，需要先安装 Axios 插件。该插件安装完成后，会自动生成 Axios 的配置文件，并在 main.js 文件中导入 Axios。

后端接口不完善时，可以使用 Mock.js 模拟数据，然后使用 Axios 发送请求以实现测试效果。

Mock.js 文档：http://mockjs.com/

示例：使用 Axios + Mock.js 模拟请求

Mock.js 配置文件（src/mock/index.js）：

// 一般在做前后端数据交互时，后端会返回code + message + data的数据形式

// 加载Mock依赖
const Mock = require('mockjs')

// 获取用户列表
Mock.mock('/api/getUserList', 'get', {
    code: 200,
    message: '获取成功',
    'data|4': [{
        id: Mock.Random.id(),
        name: '@cname()',
        birthday: '@date("yyyy-MM-dd")',
        age: '@integer(18, 60)'
    }]
})

// 新增用户
Mock.mock('/api/addUser', 'post', function (options) {
    // 调试输出请求参数
    console.log(options.body)

    return {
        code: 200,
        message: '新增成功'
    }
})

项目入口文件（src/main.js）：

import mock from './mock'

根组件（src/App.vue）：

<template>
  <div id="app">
      <button @click="getUserList">获取用户列表</button>
      <button @click="addUser">新增用户</button>
  </div>
</template>

<script>
export default {
    name: 'app',
    methods: {
        getUserList() {
            axios.get('/api/getUserList')
                .then(ret => {
                    console.log(ret.data)
                })
        },
        addUser() {
            axios.post('/api/addUser', {
                name: '张三',
                age: 18
            })
                .then(ret => {
                    console.log(ret.data)
                })
        }
    }
}
</script>

示例效果：