序章
vue3的后台管理项目,从0到1搭建,内容非常丰富涵盖项目搭建、路由配置、用户鉴权、首页报表、用户列表、前后端联调等功能,推荐指数:5颗星!
视频学习链接: vue3通用后台管理-零基础从0到1详细的入门保姆级别教程——哔哩哔哩bilibili
环境配置
node版本:需要 Node.js 版本 18+
编辑器:VScode
项目搭建
创建命令
npm create vite@latest my-vue-app -- --template vue // 创建项目
npm install // 下载项目依赖
生成的目录结构如下
-
删减不需要的东西
- 在main.js中,把默认引入的样式去掉,import ‘./style.css’
- 删除components下的HelloWorld.vue
-
app.vue中的代码改成以下这样(默认的页面)
<template>
<div></div>
</template>
<script setup>
</script>
<style scoped></style>
UI框架引入和路由搭建
使用命令下载必要依赖
配置@别名
在vite.config.js下去配置(直接copy就是)
export default defineConfig({
plugins: [vue()],
//这个resolve是添加的别名
resolve:{
alias:[
{
find: "@", replacement: "/src"
}
]
}
})
配置完成后通过 npm run dev 命令就可以启动了!
项目内容
用户鉴权和注册
通过mock模拟后端数据
用户页面修改
讲到这里,整个项目搭建过程就完成了,由于篇幅有限,详情的视频教学 推荐视频学习链接:链接: vue3通用后台管理-零基础从0到1详细的入门保姆级别教程——哔哩哔哩bilibili