Vue3入门项目 简洁清晰保姆级内容讲解

序章

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