vue项目实战，vue3项目实战，vue3+vite+pinia+element-plus+apifox搭建的通用后台管理，直接看项目效果

项目视频介绍

项目介绍大纲图

创建项目

vite官网地址

https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

创建vue3+vite的项目

要求：

Vite 需要 Node.js 版本 18+ 

创建命令：

# npm 7+, 需要额外加 --:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

下载依赖

# npm:
npm i

# yarn
yarn 

启动项目

yarn dev

删减不需要的东西

在main.js中，把默认引入的样式去掉

import './style.css'

删除components下的HelloWorld.vue

删除app.vue中的代码改成以下这样

<script setup>
    
</script>

<template>

</template>

<style scoped>

</style>

下载必备的依赖

yarn add less

yarn add vue-router

yarn add element-plus

yarn add @element-plus/icons-vue

配置@别名

在vite.config.js下

export default defineConfig({
  plugins: [vue()],
  //这个resolve是添加的别名
  resolve:{
    alias:[
      {
        find: "@", replacement: "/src" 
      }
    ]
  }
})

引入重置样式文件和图片资源

把课件中的less文件夹和images文件夹，都放到src下的assets中

在main.js中引入

import '@/assets/less/index.less'

#路由的创建

1.在src下创建router文件夹，在其中创建index.js文件

//引入两个方法，第一个创建路由器对象，第二个是开启hash模式的方法
import { createRouter, createWebHashHistory } from 'vue-router'

//路由规则
const routes = [
    {
      path: '/',
      name: 'main',
      component: () => import('@/views/Main.vue')
    }
  ]

const router = createRouter({
    //history设置路由模式
    history: createWebHashHistory(),
    routes
})

//把路由器暴露出去
export default  router

2.在src下创建views文件夹，并在其中创建Main.vue(组件需要默认的代码，不然会报错)

<template>
<div>
	我是main组件
</div>
</template>

<script setup>
</script>

<style lang="less" scoped >
</style>

3.在main.js中 使用路由，这里我们把createApp(App)用一个变量接收

import router from './router'

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

4.在app.vue组件中放置路由出口

<template>
  <router-view />      
</template>

//这个是app的样式，设置全屏展示，防止滚动条的出现
//注意，style上不要使用scoped
<style>
#app{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

#整体布局的实现

引入element-plus和@element-plus/icons-vue

文档：

element-plus：https://element-plus.org/zh-CN/guide/quickstart.html#%E5%AE%8C%E6%95%B4%E5%BC%95%E5%85%A5

@element-plus/icons-vue：https://element-plus.org/zh-CN/component/icon.html#%E6%B3%A8%E5%86%8C%E6%89%80%E6%9C%89%E5%9B%BE%E6%A0%87

//这里ElementPlus我们使用完整引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

//注册@element-plus/icons-vue图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

1.main组件的实现

<template>
    <div class="common-layout">
        
      <el-container class="lay-container">
            //这个是自定义的菜单组件
            <common-aside />
          
            <el-container>
                <el-header>
                    //这个是自定义的头部组件，需要用el-header包裹
                    <common-header />
                </el-header>

                <el-main class="right-main">
                    main
                </el-main>
            </el-container>
          
      </el-container>
        
    </div>
  </template>

<script setup>
//这三个组件后面定义，我们统一暴露出来
import {CommonAside,CommonHeader} from "@/components"

</script>

<style lang="less" scoped>
.common-layout,.lay-container {
  height: 100%;
}
.el-header{
  background-color: #333;
}

</style>

2.创建菜单和头部组件

在components下创建CommonAside.vue和CommonHeader.vue组件。还有index.js文件

在index.js中，把这两个组件统一暴露出去

export {default as CommonAside} from "./CommonAside.vue"
export {default as CommonHeader} from "./CommonHeader.vue"

后续编写过程以及详细的内容见下面

上面直接拿就是