基于Vue3.0的在线工具网站

文章目录

1、初始化项目

1.1 创建项目
1.2 安装vue路由
1.3 安装UI库

2、首页搭建

2.0 页面布局
2.1 页头
2.2 侧边栏
2.3 内容显示区域

3、字符串加密解密功能实现

3.1 页面构建
3.2 实现加密/解密

4、Json工具

4.1 Json格式化

4.1.1 搭建页面
4.1.2 实现Json格式化

4.2 Json转XML

4.1.1 搭建页面
4.1.2 实现Json转XML

4.3 Json转Excel

5、生活工具

5.1 人民币数字大写转换

6、二维码工具

6.1 生成二维码
6.2 下载二维码到本地

7、单位换算

7.1 面积换算

8、完整代码下载

1、初始化项目

1.1 创建项目

1️⃣使用如下命令创建vue项目：

npm create vite@latest

2️⃣安装依赖：

cd vue3-online-tools
npm install

3️⃣初运行项目：

npm run dev

4️⃣浏览器访问

1.2 安装vue路由

1️⃣安装vue-router路由：

npm install vue-router@4.5.0

1.3 安装UI库

1️⃣安装ElementPlus库：

npm install element-plus --save

2️⃣配置自动导入，安装插件：

npm install -D unplugin-vue-components unplugin-auto-import

3️⃣然后修改vite.config.js代码如下：

import {
            defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
            ElementPlusResolver} from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/
export default defineConfig({
            
    plugins: [
        vue(),
        AutoImport({
            
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            
            resolvers: [ElementPlusResolver()],
        }),
    ],
})

4️⃣修改App.vue代码，测试UI库：

<script setup>

</script>

<template>
  <div>
    <el-button type="primary">ElementPlus按钮测试</el-button>
  </div>
</template>

<style scoped>

</style>

5️⃣刷新浏览器，说明ElementPlus自动导入成功：

2、首页搭建

2.0 页面布局

1️⃣修改App.vue代码，只需要留一个路由出口 router-view即可：

<script setup>

</script>

<template>
  <div>
    <el-config-provider>
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

<style scoped>

</style>

2️⃣安装scss：

npm install sass@1.83.1

3️⃣新建views/layout/LayoutContainer.vue，并初始化如下代码：

<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      侧边栏
    </el-aside>
    <el-container>
      <el-header>
        页头
      </el-header>
      <el-main>
        主要内容
      </el-main>
      <el-footer>
        底部
      </el-footer>
    </el-container>
  </el-container>
</template>
<script setup>
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #ffffff;
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>

4️⃣新建router/index.js文件，配置路由：

import {
             createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
            
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            
            path: '/',
            component: () => import('@/views/layout/LayoutContainer.vue'),
        }
    ]
})

export default router

5️⃣在main.js中引入路由：

import router from './router'

createApp(App)
    .use(router)
    .mount('#app')

6️⃣设置整体外边距为0，在index.html中添加如下代码：

<style>
    body {
        margin: 0;
        background-color: #f5f5f5;
    }
</style>

7️⃣实现效果：

2.1 页头

1️⃣添加如下代码：

<el-header>
    <h4 class="title">欢迎来到在线工具网站</h4>
</el-header>

2.2 侧边栏

1️⃣安装图标库：

npm install @element-plus/icons-vue

2️⃣添加首页路由：

<el-aside width="200px">
      <div class="el-aside__logo">

      </div>
      <el-menu
          active-text-color="#f4400d"
          background-color="#ffffff"
          :default-active="$route.path"
          text-color="#000"
          router
      >
        <el-menu-item index="/home">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

3️⃣修改router/index.js代码：

import {
             createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
            
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            
            path: '/',
            component: () => import('@/views/layout/LayoutContainer.vue'),
            redirect: '/home',
            children: [
                {
            
                    path: '/home',
                    component: () => import('@/views/home/Home.vue')
                },
            ]
        }
    ]
})

export default router

4️⃣添加views/home/Home.vue组件：

<template>
  <div>
    Home
  </div>
</template>
<script setup>

</script>
<style>

</style>

5️⃣实现效果：

2.3 内容显示区域

1️⃣添加如下代码：

<el-main>
    <router-view></router-view>
</el-main>

3、字符串加密解密功能实现

3.1 页面构建

1️⃣创建encryption/Encryption.vue组件：

<template>
<page-container title="字符串加密解密">
    </page-container>
</template>
<script setup>
    import PageContainer from "@/components/PageContainer.vue";
</script>
<style>

</style>

2️⃣添加【字符串加密解密】菜单：

<el-menu-item index="/encryption">
    <el-icon><Lock /></el-icon>
    <span>字符串加密解密</span>
</el-menu-item>

3️⃣在router/index.js中配置路由：

{
            
    path: '/encryption',
        component: () => import('@/views/encryption/Encryption.vue')
},

4️⃣创建components/PageContainer.vue公共页面组件：

<script setup>
defineProps({
  title: {
    required: true,
    type: String
  }
})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{
           { title }}</span>
        <div class="extra">
          <slot name="extra"></slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>

3.2 实现加密/解密

1️⃣安装加密包：

npm install crypto-js

2️⃣进行加密/解密

const handleEncryption = ()=>{
            
  if(originalText.value === ''){
            
    ElMessage.error('请输入需要加密的文本！')
  }else{
            
    if(defaultEncryptionType.value === 'MD5'){
            
      // MD5加密
      resultText.value = CryptoJS.MD5(originalText.value).toString();
      ElMessage.success(defaultEncryptionType.value + '加密成功');
    }else if(defaultEncryptionType.value === 'AES'){
            
      // AES加密
      resultText.value = encryptAES(originalText.value);
      ElMessage.success(defaultEncryptionType.value+'加密成功');
    }
  }
}
const handleDecrypt = ()=>{
            
  if(originalText.value === ''){
            
    ElMessage.error('请输入需要解密的文本！')
  }else{
            
    resultText.value = decryptAES(originalText.value);
    if(resultText.value===''){
            
      ElMessage.error('解密失败，请重新输入密文')
    }else {
            
      ElMessage.success('解密成功');
    }
  }
}
// AES加密
const encryptAES = (text) => {
            
  const encrypted = CryptoJS.AES.encrypt(text, key, {
            
    iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}
// AES解密
const decryptAES = (ciphertext) => {
            
  const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
            
    iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return decrypted.toString(CryptoJS.enc.Utf8)
}

3️⃣复制加密/解密结果

// 复制结果
const copyToClipboard = async () => {
            
  try {
            
    await navigator.clipboard.writeText(resultText.value)
    ElMessage.success('复制成功！')
  } catch (err) {
            
    ElMessage.error('复制失败，请手动复制')
    console.error('复制失败:', err)
  }
}

4️⃣实现效果：

4、Json工具

4.1 Json格式化

4.1.1 搭建页面

1️⃣页面布局：

<template>
  <page-container title="Json格式化">
    <el-row :gutter="12">
      <el-col :span="24">
        <div>
          <!-- 左侧输入 -->
          <el-input
              type="textarea"
              v-model="originJsonStr"
              :rows="18"
             
          />

          <!-- 右侧展示 -->
          <vue-json-pretty :data="originJsonObj" :deep="6" showLineNumber />
        </div>
        <el-button-group>
          <el-button type="success" @click="handleFormatJson">Json格式化</el-button>
          <el-button type="primary" @click="copyFormatted">复制结果</el-button>
          <el-button type="danger" :icon="Delete" @click="handleClear">清空</el-button>
        </el-button-group>
      </el-col>
    </el-row>
  </page-container>
</template>

2️⃣实现效果：

4.1.2 实现Json格式化

1️⃣安装包，用来可视化Json数据：

npm install vue-json-pretty

2️⃣格式化代码：

const handleFormatJson = () => {
            
  try {
            
    const obj = JSON.parse(originJsonStr.value);
    originJsonObj.value = obj;
    ElMessage.success('格式化成功');
  } catch (err) {
            
    ElMessage.error('JSON 格式不正确');
  }
}

3️⃣实现效果：

4.2 Json转XML

4.1.1 搭建页面

4.1.2 实现Json转XML

1️⃣安装包，实现能将 JSON 数据结构轻松转换为XML字符串：

npm install xml-js

2️⃣实现代码：

const handleToXml = () => {
            
  try {
            
    const jsonObj = JSON.parse(jsonInput.value)
    xmlOutput.value = js2xml(jsonObj, {
            compact: true, spaces: 2})
    ElMessage.success('Json转XML成功');
  } catch (error) {
            
    ElMessage.error('JSON 格式不正确');
  }
}

3️⃣美观xml结果输出，安装包：

npm install xml-formatter

4️⃣实现xml可视化：

<pre class="formatted-xml">{
            {
             xmlOutput }}</pre>

5️⃣实现效果：

4.3 Json转Excel

1️⃣安装包：

npm install file-saver
npm install xlsx

2️⃣编写下载excel代码：

// 下载Excel
const downloadExcel = () => {
            
  if (tableData.value.length === 0) return;

  const ws = XLSX.utils.json_to_sheet(tableData.value);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

  const excelBuffer = XLSX.write(wb, {
             bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], {
             type: 'application/octet-stream' });
  saveAs(blob, 'data.xlsx');
};

3️⃣下载csv代码：

// 下载CSV
const downloadCsv = () => {
            
  if (tableData.value.length === 0) return;

  // 1. 生成带 BOM 的 UTF-8 编码前缀
  const utf8Bom = new Uint8Array([0xef, 0xbb, 0xbf]); // UTF-8 BOM

  // 2. 构建 CSV 内容（含转义处理）
  const headers = tableColumns.value.map(col => col.label);
  const rows = [
    headers.join(','), // 表头
    ...tableData.value.map(item => {
            
      return headers.map(header => {
            
        const key = tableColumns.value.find(col => col.label === header)?.prop;
        const value = item[key] !== undefined ? item[key] : '';

        // 转义处理：若值包含逗号、引号或换行，用双引号包裹
        if (value.toString().match(/[, "
]/)) {
            
          return `"${
              value.toString().replace(/"/g, '""')}"`; // 双引号转义
        }
        return value.toString();
      }).join(',');
    })
  ].join('
');

  // 3. 生成包含 BOM 的 Blob（强制 UTF-8 编码）
  const encoder = new TextEncoder();
  const csvWithBom = new Uint8Array([...utf8Bom, ...encoder.encode(rows)]);
  const blob = new Blob([csvWithBom], {
             type: 'text/csv;charset=utf-8' });

  // 4. 下载文件
  saveAs(blob, '数据.csv'); // 建议文件名用中文，明确文件内容
};

4️⃣实现效果：

5️⃣下载的数据：

5、生活工具

5.1 人民币数字大写转换

1️⃣新建utils/convertMoney.js文件：

// utils/convertMoney.js
export function numberToChinese(n) {
            
    if (!/^(0|[1-9]d*)(.d{1,2})?$/.test(n)) return '金额格式错误';

    const fraction = ['角', '分'];
    const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
    const unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']];
    let head = n < 0 ? '负' : '';
    n = Math.abs(n);

    let s = '';

    // 小数部分
    for (let i = 0; i < fraction.length; i++) {
            
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i])
            .replace(/零./, '');
    }
    s = s || '整';

    // 整数部分
    n = Math.floor(n);
    for (let i = 0; i < unit[0].length && n > 0; i++) {
            
        let p = '';
        for (let j = 0; j < unit[1].length && n > 0; j++) {
            
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '')
            .replace(/^$/, '零') + unit[0][i] + s;
    }

    return head + s
        .replace(/(零.)*零元/, '元')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零元整');
}

2️⃣完整实现代码：

<template>
  <page-container title="人民币数字转大写">
    <div>
      <el-space>
        <img src="@/assets/convertMoney.svg">人民币数字大写转换
      </el-space>
    </div>
    <div>
      <el-space>
        <el-input
            v-model="amount"
            placeholder="请输入金额"
            @input="handleChange"
           
        />
        <el-input :disabled="true" v-model="result"></el-input>
        <el-button type="primary" @click="copyFormatted">复制结果</el-button>
        <el-button type="danger" @click="handleClear">清空</el-button>
      </el-space>
    </div>
  </page-container>
</template>
<script setup>
import PageContainer from "@/components/PageContainer.vue";
import {
             ref } from 'vue';
import {
             numberToChinese } from '@/utils/convertMoney';

const amount = ref('');
const result = ref('');

const handleChange = () => {
            
  result.value = numberToChinese(amount.value);
};
const handleClear = ()=>{
            
  amount.value = '';
  result.value = '';
}
const copyFormatted = async () => {
            
  try {
            
    if(amount.value !== ''){
            
      await navigator.clipboard.writeText(JSON.stringify(result.value, null, 2))
      ElMessage.success('复制成功')
    }else{
            
      ElMessage.error('请输入人民币金额');
    }
  } catch (err) {
            
    ElMessage.error(err);
  }
}

</script>

3️⃣实现效果：

6、二维码工具

6.1 生成二维码

1️⃣安装包：

npm install qrcode

6.2 下载二维码到本地

1️⃣实现代码：

const downloadQRCode = () => {
            
  const link = document.createElement('a')
  link.href = qrcodeDataUrl.value
  link.download = 'qrcode.png'  // 下载的文件名
  link.click()
}

7、单位换算

7.1 面积换算

import {
            ref, watch} from 'vue';
import PageContainer from "@/components/PageContainer.vue";
const squareKilometers = ref(0);
const hectares = ref(0);
const mu = ref(0);
const ymu = ref(0);
// 单位转换函数
const km2ToHectare = (km2) => km2 * 100;
const km2ToMu = (km2) => km2 * 1500;
const hectareToKm2 = (hectare) => hectare / 100;
const hectareToMu = (hectare) => hectare * 15;
const muToKm2 = (mu) => mu / 1500;
const muToHectare = (mu) => mu / 15;

// 监听输入变化并更新其他单位
watch(squareKilometers, (newValue) => {
            
  if (newValue !== '') {
            
    const km2 = Number(newValue);
    hectares.value = km2ToHectare(km2);
    mu.value = km2ToMu(km2);
  } else {
            
    hectares.value = '';
    mu.value = '';
  }
});

watch(hectares, (newValue) => {
            
  if (newValue !== '') {
            
    const hectare = Number(newValue);
    squareKilometers.value = hectareToKm2(hectare);
    mu.value = hectareToMu(hectare);
  } else {
            
    squareKilometers.value = '';
    mu.value = '';
  }
});

watch(mu, (newValue) => {
            
  if (newValue !== '') {
            
    const muValue = Number(newValue);
    squareKilometers.value = muToKm2(muValue);
    hectares.value = muToHectare(muValue);
  } else {
            
    squareKilometers.value = '';
    hectares.value = '';
  }
});

8、完整代码下载

分享文件：vue3-online-tools.zip
链接：https://pan.xunlei.com/s/VOSEt7rsxMffi_YbUZb2-zq9A1#
提取码：38g6
复制这段内容后打开迅雷，查看更方便