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

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-menuactive-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