webpack5資源管理四之加載數(shù)據(jù)文件使用詳解

ebpack除了可以處理加載頁面資源文件引用之外，還可以加載的資源有數(shù)據(jù)文件，如 JSON 、CSV、TSV 和 XML格式的文件。類似于 NodeJS，內(nèi)置的支持JSON格式的數(shù)據(jù)，其可以通過 import Data from './data.json' 引入并正常運(yùn)行。但是要導(dǎo)入 CSV、TSV 和 XML格式的文件，需要使用對應(yīng)的csv-loader 和 xml-loader的loader，來處理加載這三類文件。

初始化示例工程

創(chuàng)建一個(gè)工程名為：webpack-datafile，并進(jìn)行相應(yīng)內(nèi)容的初始化。

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

工程目錄結(jié)構(gòu)如下：

工程目錄結(jié)構(gòu)

加載及配置數(shù)據(jù)資源

手下在src目錄下添加數(shù)據(jù)資源文件data.xml，data.csv。

其中data.xml文件的內(nèi)容如下：

<?xml version="1.0" encoding="UTF-8"?>
<email>
  <from>張三</from>
  <to>李四</to>
  <subjet>會(huì)議</subjet>
  <body>明天上午8點(diǎn)，會(huì)議室開會(huì)！</body>
</email>

data.csv的內(nèi)容

from,to,subject,body
張三,李四,會(huì)議,明天上午8點(diǎn)開會(huì)
李四,王五,采購,明天采購一臺(tái)筆記本

然后在src/index.js中，引入數(shù)據(jù)文件，并進(jìn)行數(shù)據(jù)的讀取操作。

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

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

執(zhí)行在本地安裝數(shù)據(jù)解析loader：csv-loader 和 xml-loader

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

完善webpack的配置文件，使其進(jìn)行項(xiàng)目構(gòu)建時(shí)可以解析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']
            }
        ]
    }
}

然后執(zhí)行npm run build進(jìn)行項(xiàng)目的構(gòu)建。

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

進(jìn)入構(gòu)建之后的目錄并打開index.html，查看控制臺(tái)輸出的數(shù)據(jù)內(nèi)容：

效果

可以看到，控制臺(tái)輸出一個(gè)對象和一個(gè)數(shù)組。

通Vue：手把手教你將JSON數(shù)據(jù)優(yōu)雅寫入文本，并深度解讀Vue引入CDN的實(shí)戰(zhàn)技巧

一、前言：Vue與JSON數(shù)據(jù)交互的重要性



在現(xiàn)代Web開發(fā)領(lǐng)域中，Vue.js以其輕量級(jí)、易上手且功能強(qiáng)大的特性贏得了眾多開發(fā)者青睞。作為一款漸進(jìn)式JavaScript框架，Vue在處理數(shù)據(jù)綁定、組件化開發(fā)等方面表現(xiàn)卓越，而JSON（JavaScript Object Notation）作為一種輕量級(jí)的數(shù)據(jù)交換格式，其簡潔明了的特性使其成為前后端通信的首選。因此，掌握如何優(yōu)雅地在Vue項(xiàng)目中處理JSON數(shù)據(jù)至關(guān)重要。本文將詳細(xì)介紹如何使用Vue將JSON數(shù)據(jù)優(yōu)雅寫入文本，并深入探討Vue引入CDN（Content Delivery Network）的實(shí)戰(zhàn)技巧，以提升應(yīng)用性能與用戶體驗(yàn)。

二、Vue中JSON數(shù)據(jù)的解析與顯示

2.1 JSON數(shù)據(jù)的獲取

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數(shù)據(jù)。以下是一個(gè)簡單的HTTP GET請求示例，使用axios庫獲取JSON數(shù)據(jù)：

2.2 JSON數(shù)據(jù)的模板渲染

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>

對應(yīng)的Vue模板代碼如下：

三、Vue中將JSON數(shù)據(jù)優(yōu)雅寫入文本文件

3.1 使用FileSaver.js實(shí)現(xiàn)下載



現(xiàn)在，只需在界面中添加一個(gè)按鈕觸發(fā)`exportJson`方法，用戶即可將JSON數(shù)據(jù)優(yōu)雅地保存為名為"data.json"的文本文件。

然后在Vue組件中使用：

四、Vue引入CDN的實(shí)戰(zhàn)技巧

4.1 為什么選擇CDN

CDN能有效減少網(wǎng)絡(luò)延遲、提高資源加載速度、減輕服務(wù)器壓力，從而提升應(yīng)用性能和用戶體驗(yàn)。對于Vue項(xiàng)目，引入CDN可以加速Vue核心庫、第三方依賴庫（如axios、lodash等）以及靜態(tài)資源（如圖片、字體等）的加載。

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標(biāo)簽... -->
</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 靜態(tài)資源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">

對于圖片、字體等靜態(tài)資源，建議將其上傳至云存儲(chǔ)服務(wù)（如阿里云OSS、騰訊云COS等），并獲取對應(yīng)的CDN加速鏈接。在Vue項(xiàng)目中，直接使用CDN鏈接替代本地路徑：

4.5 備份方案與版本控制

盡管CDN可以顯著提升應(yīng)用性能，但應(yīng)考慮網(wǎng)絡(luò)波動(dòng)、CDN服務(wù)不穩(wěn)定等情況，提供本地備份或備用CDN鏈接。同時(shí)，對CDN資源進(jìn)行版本控制，確保在更新依賴時(shí)不影響線上應(yīng)用。

五、結(jié)語

通過本文，您已掌握了如何在Vue項(xiàng)目中優(yōu)雅地處理JSON數(shù)據(jù)，包括獲取、渲染與導(dǎo)出，以及如何巧妙地引入CDN以提升應(yīng)用性能。這些技巧將助力您打造更高效、更穩(wěn)定的Vue應(yīng)用程序，為用戶提供卓越的Web體驗(yàn)。持續(xù)關(guān)注本頭條號(hào)，了解更多前沿的Web前端開發(fā)知識(shí)與實(shí)戰(zhàn)技巧。

天給小伙伴們推薦一款強(qiáng)大的Vue可自由拖拽表單設(shè)計(jì)器組件。

vue-form-making 基于vue.js簡單高效的表單設(shè)計(jì)器組件，star高達(dá)3.3K+。簡單拖拽即可進(jìn)行表單設(shè)計(jì)，可生成/導(dǎo)出json及代碼，支持i18n國際化。

功能特性

可視化配置頁面
基于vue2.0桌面端組件庫Element-UI
提供柵格布局，并采用flex實(shí)現(xiàn)對齊
一鍵預(yù)覽配置的效果
一鍵生成配置json數(shù)據(jù)
一鍵生成代碼，立即可運(yùn)行
提供自定義組件滿足用戶自定義需求
提供遠(yuǎn)端數(shù)據(jù)接口，方便用戶需要異步獲取數(shù)據(jù)加載
提供功能強(qiáng)大的高級(jí)組件
支持表單驗(yàn)證
快速獲取表單數(shù)據(jù)
國際化支持

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>

<!-- 需要在設(shè)計(jì)器中預(yù)覽代碼需要引入ace.js庫 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

<!-- 使用 -->
<div id="app">
  <!-- 需要設(shè)置編輯區(qū)域高度 -->
  <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 () {
      // 模擬數(shù)據(jù)請求
      setTimeout(()=> {
        this.dynamicData.option=[
          {value: '1111', label: '1111'},
          {value: '2222', label: '2222'},
          {value: '3333', label: '3333'}
        ]
      }, 500)
    }
  }
}

語言配置

FormMaking 組件支持中文簡體(zh-CN)和英文(en-US)兩種語言，默認(rèn)使用中文簡體。

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

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

富文本編輯器

如果需要使用富文本編輯器，需要單獨(dú)引入 vue2-editor

import VueEditor from "vue2-editor"

Vue.use(VueEditor)

提供各種演示文檔及豐富的示例

頁面布局

數(shù)據(jù)綁定

ok，就分享到這里。希望對大家有所幫助。如果喜歡，記得多支持下哈。

在線咨詢

上一篇：外貿(mào)網(wǎng)站的產(chǎn)品分類策略
下一篇：CSS FP50宣布啟動(dòng)新成員招募發(fā)掘安全未來力量

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商