基于vue的后台管理 之 搭建项目 前篇（完结）

最新推荐文章于 2025-01-06 18:10:58 发布
原创 最新推荐文章于 2025-01-06 18:10:58 发布 · 182 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了使用Vue.js和Element-UI库构建后台管理界面的过程，包括初始化项目、安装必要的依赖如axios和less，以及设置和运行项目。在没有实际接口数据的情况下，通过模拟数据完成了登录和首页的展示。此篇博客着重于前端开发中的项目构建和技术选型。

前言
记录做后台管理的时候遇到的一些问题、小知识点以及一些bug

目前，项目中界面组件应用到element-ui，请求用到axios，
有接口就先写登录界面，完成登录功能，登陆进入首页。
没有接口数据，只是简单模拟数据。就写首页界面。首页

打开终端 执行vue ui 命令行。

在打开的ui界面中创建项目

在这里插入图片描述
创建项目名称
在这里插入图片描述
配置预设，
在这里插入图片描述
选择功能
在这里插入图片描述
配置选择校验规则后，创建完成
在这里插入图片描述

安装插件和依赖

安装vue-cli-plugin-element 插件
在这里插入图片描述
在开发依赖中安装axios依赖
在这里插入图片描述
安装less样式
1.安装less-loader
在这里插入图片描述
2.安装less
在这里插入图片描述
安装完成后，重新运行项目

vue2.0搭建的后台管理
09-29
使用vue搭建一个后台管理系统，使用了element，实现数据的增删改查，树状结构，面包屑，功能齐全，涉及知识面广泛
创建与管理 vue 项目
u011700186的博客
05-14 600
概要 可以使用 vue/cli 提供的 vue命令来创建与管理项目，包括项目依赖管理，编译打包等。另外 vue 还提供了一个 vue ui 功能可用于可视化的创建与管理 vue 项目，非常地方便。 在使用 vue 命令之前，请确保已经安装了 @vue/cli 包。 正文 1、创建项目 vue create [PROJECT_NAME] 示例： ➜WebstormProj...
从零编写 vue 后台管理系统（02）
养猪少年日记的博客
08-24 461
在src 下新建 views 文件 一个完整的store结构 每一个Vuex应用的核心就是store（仓库）。store 基本上就是一个容器，包含着应用中大部分的state（状态）。 Vuex和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 mutation。这样使得我们可以方便地跟
搭建后台管理界面
maodi_v的博客
03-17 2853
学习目标 搭建后台管理界面 商品管理 1.搭建后台管理界面 1.1.认识Vue 1.1.1.Vue介绍 ​ Vue (读音 /vjuː/，类似于 view) 是是一套用于构建用户界面的前端框架，使用Vue可以快速搭建一个在运行在node上的Vue项目。 1.1.2.Node介绍 ​ Node.js是一个在浏览器外执行JavaScript语言的环境，就好比JRE是Java的运行环境。 1.1.3.NPM介绍 ​ 使用node开发还可以使用配套的npm包管理工具，npm是Node.js的包管理工具，能解决N
vue项目一个页面接口很多怎么写_vue一个项目多入口打包的简单解决方案
weixin_39889487的博客
12-20 646
项目需要，本来单页面的项目，要改成入口多页面，打包之后也是多页面，这就需要改造项目结构下面我们开始：项目是vue-cli3.0需要改变的东西，先列出来1.src目录结构2.vue.config.js配置3.页面间的图片，scss，main.js中的文件引用1.我们先来看目录结构image.png项目修改之后的结构就这样，我就主要说下我这个项目吧views目录下，分了两个小项目，index和mon会...
基于Django+Vue3的后台管理系统(前后端分离)
最新发布
04-11
基于Django+Vue3的前后端分离的后台管理系统，采用了最新的前后端技术栈，内置了丰富的功能模块，可以帮助开发者快速搭建企业级中后台产品。技术架构中包含前端技术栈和后端技术栈，环境要求根据项目所写执行。 其...
精选资源
基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板
02-23
总之，基于Vue CLI 3和Ant Design Vue搭建后台管理系统模板，可以极大地提高开发效率，同时提供美观、易用的界面。结合Vue.js的响应式数据绑定、组件化以及Vuex和Vue Router的强大功能，你可以构建出功能完善、易于...
vue2+element+admin后台管理项目模板
02-27
Element UI是基于Vue.js的桌面端组件库，它提供了一套丰富的界面组件，使得开发者能够快速搭建出美观且响应式的用户界面。而Admin是一种后台管理系统的模板，它结合了Vue.js和Element UI的优势，为开发者提供了一个...
后台管理系统-使用Vue3+ElementPlus+Typescript开发的后台管理系统-优质项目实战.zip
10-16
ElementPlus是一个基于Vue3的桌面端组件库，提供了一整套的UI解决方案，使得开发界面更加美观和便捷；Typescript是一种强类型的超集，它在JavaScript的基础上增加了类型系统，使得代码更加健壮、易于维护。 首先，...
精选资源
vue后台管理系统-基于vue+vuex+element搭建的PC端后台管理系统.zip
04-04
Vue 后台管理系统是一...Vue后台管理系统的特点在于其高度可复用的组件、清晰的模块化设计和易于维护的代码结构。通过以上步骤，开发者可以快速搭建出功能齐全、用户体验良好的后台管理系统，适应各种企业级应用场景。
Vue搭建通用后台管理系统项目实战
忆~遂愿的博客
03-10 456
摘要：本文将介绍Vue.js，一个流行的JavaScript框架，用于构建现代化的Web应用程序。我们将首先解释Vue.js的基本概念和核心功能，包括数据绑定、组件化和虚拟DOM。然后，我们将讨论Vue.js与其他框架的比较，例如Angular和React，并分享一些使用Vue.js开发应用程序的最佳实践。最后，我们将探讨Vue.js在实际项目中的应用案例，并展望Vue.js的未来发展趋势。无论是初学者还是有经验的开发者，本文都将为您提供一个全面的Vue.js概述，帮助您更好地理解和应用这个强大的框架。
vue管理后台搭建
gaotlantis的博客
01-06 494
在tsconfig.json文件中的compilerOptions对象内添加配置项。到目录，然后运行yarn安装项目依赖，运行yarn dev启动项目，运行端口。@types/node内部包含了对Node.js 核心模块及常用第三方库的。描述，增加了TypeScript 对 Node.js 环境的支持。3.在vite.config.ts文件中添加配置项。main.ts中完整引入element-plus。选择你要创建的模板，这里我选择vue-ts模板。, 您可以配置以下代码在。引入router文件。
168张图，万字长文，手把手教你开发vue后台管理系统
热门推荐
程序员小明1024
10-03 2万+
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
vue系列（三）——手把手教你搭建一个vue3管理后台基础模板
xxfen_的博客
07-02 2万+
手把手教你搭建一个vue3管理后台基础模，附带源代码
搭建element-Vue2后台管理项目
weixin_58431406的博客
06-13 6058
从0开始快速搭建一个后台管理系统，非常简单的易上手好理解
手把手教你搭建 Vue 后台管理系统框架（基础效果篇）
GitChat
10-27 2113
本场 chat 主要是演示这套“后台管理系统”的基础效果图，主要包括以下几点： 1.登录（路由守卫）； 2.封装 Axios 请求； 3.Tabs 动态管理，切换界面； 4.动态渲染菜单； 5.< keep-alive > 动态缓存指定组件； 6.Vue-Router 路由管理； 7.VueX 状态管理； 8.图表拖拽效果； 特点：适合用...
从零创建vue 项目，结合element ui 搭建后台管理系统
不一样的自己的博客
07-11 441
一、环境配置 1、nodejs安装 点击下载nodejs，window8以上下载最新版安装即可，可选择.msi安装包。 npm 会跟着nodejs一起安装，安装完后输入node -v 和 npm -v 检查版本。 npm升级：npm install -g npm@7.19.1 2、安装vue 工具 安装 vue-cli ： npm install -g @vue/cli 这一步如果之前已有安装则会更新已有插件包 检查是否成功安装: vue -V 可查看版本 也可以通过如下命令查看已安装的插件包： npm l
vue+Element后台管理系统框架搭建（一）
sinat_33564062的博客
11-27 9446
vue+Element后台管理系统框架搭建vue框架搭建及开发规范1.1环境配置1.2项目创建1.开始搭建项目vueProject2.打开我们的项目，可以看到如下的目录结构：1.3开发规范1.vueProject的目录结构：2.项目创建及命名规范2.vue2.0概念和语法2.1 Vue.js的目的2.2 Vue.js特性1.MVVM模式2.4 Vue核心思想1.数据驱动2.组件化3.指令系统4.V...
vue cli4——使用vue ui进行项目的创建及管理
jiyuzzz的博客
10-28 586
在vue cli3之后就可以使用vue的可视化项目管理工具了 直接在cmd输入命令：vue ui 启动即可，地址默认是localhost:8000 先查看版本 注意是大写的V vue -V 也可以用vue create （项目名）来创建项目 这里我们使用更简单的vue ui创建项目 vue ui 点击vue项目管理器 选择创建 选好项目路径以及名称 第一次使用时可以选择手动配置（之后可以选择保存这套配置） 勾选这4个就够了 babel，可将ES6语法转成ES5语法。 TypeScr.
基于Vue和ElementUI的后台管理项目搭建指南
资源摘要信息:"Vue-element-admin.zip是一个后台管理系统的...该资源包是后台管理项目开发的一个极佳起点，开发者可以通过它快速搭建起一个功能齐全的后台管理系统，进一步在此基础上开发出更多业务逻辑和定制化功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值