基于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-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