文章目录
- 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" style="border-right: 1px solid #f5f5f5">
侧边栏
</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" style="border-right: 1px solid #f5f5f5">
<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
