首页 > 其他分享 >Vue3入门项目 简洁清晰保姆级内容讲解

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

时间:2024-08-09 11:53:52浏览次数:9  
标签:vue 入门 项目 Vue3 哔哩 vue3 js 讲解 搭建

序章

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

标签:vue,入门,项目,Vue3,哔哩,vue3,js,讲解,搭建
From: https://blog.csdn.net/qq616592958/article/details/140956212

相关文章