webpack5资源管理四之加载数据文件使用详解

ebpack除了可以处理加载页面资源文件引用之外，还可以加载的资源有数据文件，如 JSON 、CSV、TSV 和 XML格式的文件。类似于 NodeJS，内置的支持JSON格式的数据，其可以通过 import Data from './data.json' 引入并正常运行。但是要导入 CSV、TSV 和 XML格式的文件，需要使用对应的csv-loader 和 xml-loader的loader，来处理加载这三类文件。

初始化示例工程

创建一个工程名为：webpack-datafile，并进行相应内容的初始化。

mkdir webpack-datafile
cd webpack-datafile
npm init -y
npm install webpack webpack-cli --save-dev

工程目录结构如下：

工程目录结构

加载及配置数据资源

手下在src目录下添加数据资源文件data.xml，data.csv。

其中data.xml文件的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<email>
  <from>张三</from>
  <to>李四</to>
  <subjet>会议</subjet>
  <body>明天上午8点，会议室开会！</body>
</email>

data.csv的内容

from,to,subject,body
张三,李四,会议,明天上午8点开会
李四,王五,采购,明天采购一台笔记本

然后在src/index.js中，引入数据文件，并进行数据的读取操作。

import email from './data.xml'
import emails from './data.csv'

console.log(email)
console.log(emails)

执行在本地安装数据解析loader：csv-loader 和 xml-loader

npm install csv-loader xml-loader --save-dev

完善webpack的配置文件，使其进行项目构建时可以解析xml、csv格式的文件：

const path=require('path')

module.exports={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.xml$/i,
                use: ['xml-loader']
            },
            {
                test: /\.csv$/i,
                use: ['csv-loader']
            }
        ]
    }
}

然后执行npm run build进行项目的构建。

npm run build

> webpack-datafile@1.0.0 build D:\work\webpack5\webpack-datafile
> webpack

asset bundle.js 753 bytes [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
cacheable modules 399 bytes
  ./src/index.js 106 bytes [built] [code generated]
  ./src/data.xml 131 bytes [built] [code generated]
  ./src/data.csv 162 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 579 ms

进入构建之后的目录并打开index.html，查看控制台输出的数据内容：

效果

可以看到，控制台输出一个对象和一个数组。

通Vue：手把手教你将JSON数据优雅写入文本，并深度解读Vue引入CDN的实战技巧

一、前言：Vue与JSON数据交互的重要性



在现代Web开发领域中，Vue.js以其轻量级、易上手且功能强大的特性赢得了众多开发者青睐。作为一款渐进式JavaScript框架，Vue在处理数据绑定、组件化开发等方面表现卓越，而JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，其简洁明了的特性使其成为前后端通信的首选。因此，掌握如何优雅地在Vue项目中处理JSON数据至关重要。本文将详细介绍如何使用Vue将JSON数据优雅写入文本，并深入探讨Vue引入CDN（Content Delivery Network）的实战技巧，以提升应用性能与用户体验。

二、Vue中JSON数据的解析与显示

2.1 JSON数据的获取

javascript
import axios from 'axios';

export default {
  data() {
    return {
      jsonData: null,
    };
  },
  async created() {
    try {
      const response=await axios.get('https://api.example.com/data');
      this.jsonData=response.data;
    } catch (error) {
      console.error('Error fetching JSON data:', error);
    }
  },
};

首先，我们需要通过API接口或其他方式获取JSON数据。以下是一个简单的HTTP GET请求示例，使用axios库获取JSON数据：

2.2 JSON数据的模板渲染

html
<template>
  <div>
    <ul>
      <li v-for="user in jsonData.users" :key="user.id">
        ID: {{ user.id }} | Name: {{ user.name }} | Age: {{ user.age }}
      </li>
    </ul>
  </div>
</template>

对应的Vue模板代码如下：

三、Vue中将JSON数据优雅写入文本文件

3.1 使用FileSaver.js实现下载



现在，只需在界面中添加一个按钮触发`exportJson`方法，用户即可将JSON数据优雅地保存为名为"data.json"的文本文件。

然后在Vue组件中使用：

四、Vue引入CDN的实战技巧

4.1 为什么选择CDN

CDN能有效减少网络延迟、提高资源加载速度、减轻服务器压力，从而提升应用性能和用户体验。对于Vue项目，引入CDN可以加速Vue核心库、第三方依赖库（如axios、lodash等）以及静态资源（如图片、字体等）的加载。

4.2 Vue核心库CDN引入

html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 替换为Vue CDN链接 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 其他meta、link标签... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

在HTML文件中，直接替换本地Vue库引用为CDN链接：

4.3 第三方库CDN引入

html
<script src="https://cdn.jsdelivr.net/npm/axios@0.21"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17"></script>

同样地，第三方库如axios、lodash等也可以通过CDN引入：

4.4 静态资源CDN托管

html
<img src="https://example.cdn.com/path/to/image.jpg" alt="Image from CDN">
<link rel="stylesheet" href="https://example.cdn.com/path/to/font.css">

对于图片、字体等静态资源，建议将其上传至云存储服务（如阿里云OSS、腾讯云COS等），并获取对应的CDN加速链接。在Vue项目中，直接使用CDN链接替代本地路径：

4.5 备份方案与版本控制

尽管CDN可以显著提升应用性能，但应考虑网络波动、CDN服务不稳定等情况，提供本地备份或备用CDN链接。同时，对CDN资源进行版本控制，确保在更新依赖时不影响线上应用。

五、结语

通过本文，您已掌握了如何在Vue项目中优雅地处理JSON数据，包括获取、渲染与导出，以及如何巧妙地引入CDN以提升应用性能。这些技巧将助力您打造更高效、更稳定的Vue应用程序，为用户提供卓越的Web体验。持续关注本头条号，了解更多前沿的Web前端开发知识与实战技巧。

天给小伙伴们推荐一款强大的Vue可自由拖拽表单设计器组件。

vue-form-making 基于vue.js简单高效的表单设计器组件，star高达3.3K+。简单拖拽即可进行表单设计，可生成/导出json及代码，支持i18n国际化。

功能特性

可视化配置页面
基于vue2.0桌面端组件库Element-UI
提供栅格布局，并采用flex实现对齐
一键预览配置的效果
一键生成配置json数据
一键生成代码，立即可运行
提供自定义组件满足用户自定义需求
提供远端数据接口，方便用户需要异步获取数据加载
提供功能强大的高级组件
支持表单验证
快速获取表单数据
国际化支持

CDN方式引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

<!-- 使用 -->
<div id="app">
  <!-- 需要设置编辑区域高度 -->
  <fm-making-form style="height: 500px;" preview generate-code generate-json>
  </fm-making-form>
</div>

NPM安装

$ npm i form-making -S

引入组件

// 在main.js中完整引入
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.use(FormMaking)

// 在组件页面按需引入
import { GenerateForm, MakingForm } from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.component(GenerateForm)
Vue.component(MakingForm)

使用插件

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      :remote-option="dynamicData"
      ref="generateForm"
      preview
      generate-code
      generate-json
      :basic-fields="['input', 'textarea', 'radio', 'checkbox', 'switch']"
      :advance-fields="['imgupload', 'editor', 'table']"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button @click="handleLoadOption">Load Option</el-button>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"width":"","remote":true,"remoteType":"option","remoteOption":"option","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1575969479252","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1575969479252","model":"option","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      dynamicData: {
        option : [], // 单选框组 option data
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data=> {
        alert(JSON.stringify(data))
      }).catch(e=> {
      })
    },

    handleLoadOption () {
      // 模拟数据请求
      setTimeout(()=> {
        this.dynamicData.option=[
          {value: '1111', label: '1111'},
          {value: '2222', label: '2222'},
          {value: '3333', label: '3333'}
        ]
      }, 500)
    }
  }
}

语言配置

FormMaking 组件支持中文简体(zh-CN)和英文(en-US)两种语言，默认使用中文简体。

Vue.use(FormMaking, {lang: 'en-US'})

// cdn引入配置
<script>
  Vue.config.lang='zh-CN'
  new Vue({
    el: '#app'
  })
</script>

富文本编辑器

如果需要使用富文本编辑器，需要单独引入 vue2-editor

import VueEditor from "vue2-editor"

Vue.use(VueEditor)

提供各种演示文档及丰富的示例

页面布局

数据绑定

ok，就分享到这里。希望对大家有所帮助。如果喜欢，记得多支持下哈。

在线咨询

上一篇：外贸网站的产品分类策略
下一篇：CSS FP50宣布启动新成员招募发掘安全未来力量

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商