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

最新推荐文章于 2022-10-03 08:13:00 发布
最新推荐文章于 2022-10-03 08:13:00 发布
阅读量147 收藏
点赞数
分类专栏： 基于vue的后台管理开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Boo_crob/article/details/115405535
版权
本文记录了使用Vue.js和Element-UI库构建后台管理界面的过程，包括初始化项目、安装必要的依赖如axios和less，以及设置和运行项目。在没有实际接口数据的情况下，通过模拟数据完成了登录和首页的展示。此篇博客着重于前端开发中的项目构建和技术选型。
摘要由CSDN通过智能技术生成

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

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

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

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

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

安装插件和依赖

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

Boo_crob
关注
专栏目录
vue2.0搭建的后台管理
09-29
使用vue搭建一个后台管理系统，使用了element，实现数据的增删改查，树状结构，面包屑，功能齐全，涉及知识面广泛
创建与管理 vue 项目
u011700186的博客
05-14 539
概要 可以使用 vue/cli 提供的 vue命令来创建与管理项目，包括项目依赖管理，编译打包等。另外 vue 还提供了一个 vue ui 功能可用于可视化的创建与管理 vue 项目，非常地方便。 在使用 vue 命令之前，请确保已经安装了 @vue/cli 包。 正文 1、创建项目 vue create [PROJECT_NAME] 示例： ➜WebstormProj...
从零编写 vue 后台管理系统（02）
养猪少年日记的博客
08-24 409
在src 下新建 views 文件 一个完整的store结构 每一个Vuex应用的核心就是store（仓库）。store 基本上就是一个容器，包含着应用中大部分的state（状态）。 Vuex和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 mutation。这样使得我们可以方便地跟
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 1万+
手把手教你搭建一个vue3管理后台基础模，附带源代码
vue后台管理系统-基于vue+vuex+element搭建的PC端后台管理系统.zip
最新发布
04-04
Vue 后台管理系统是一...Vue后台管理系统的特点在于其高度可复用的组件、清晰的模块化设计和易于维护的代码结构。通过以上步骤，开发者可以快速搭建出功能齐全、用户体验良好的后台管理系统，适应各种企业级应用场景。
基于vue + element UI 的后台管理系统模板
09-12
在本项目"基于vue + element UI 的后台管理系统模板"中，开发者可以利用这些组件和功能，快速搭建起一个具备基本管理功能的后台系统。通过动态路由的实现，系统可以根据用户权限动态加载相应的组件和页面，提高用户...
基于vue3+TS构建的商城后台管理系统
02-23
Element Plus是基于Vue3的UI组件库，提供了丰富的界面元素，如表格、按钮、模态框等，可以帮助快速搭建后台管理界面，提高开发效率。 【测试与调试】 对于商城后台管理系统，单元测试和集成测试是必不可少的。Vue ...
基于vue2 + Element-ui搭建的后台管理系统源码.zip
10-12
Vue2是一个轻量级的JavaScript框架，以其简洁的API和高效的响应式系统著称，而Element-UI则是一个基于Vue2的组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观的管理界面。 Vue2的核心特性包括： 1. **...
基于Vue.js2.0的后台管理模板
02-25
在这个基于Vue.js 2.0的后台管理模板中，开发者可以快速搭建一个功能完备的后台管理系统。下面将详细介绍这个模板包含的关键知识点。 1. **Vue.js 2.0**：Vue.js 2.0是Vue.js框架的第二个主要版本，它引入了性能...
搭建element-Vue2后台管理项目
weixin_58431406的博客
06-13 5845
从0开始快速搭建一个后台管理系统，非常简单的易上手好理解
从零创建vue 项目，结合element ui 搭建后台管理系统
不一样的自己的博客
07-11 389
一、环境配置 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 后台管理系统框架（基础效果篇）
GitChat
10-27 1987
本场 chat 主要是演示这套“后台管理系统”的基础效果图，主要包括以下几点： 1.登录（路由守卫）； 2.封装 Axios 请求； 3.Tabs 动态管理，切换界面； 4.动态渲染菜单； 5.< keep-alive > 动态缓存指定组件； 6.Vue-Router 路由管理； 7.VueX 状态管理； 8.图表拖拽效果； 特点：适合用...
使用 vue2.x + ElementUI 快速搭建一个后台 增删改查 管理界面
热门推荐
IT小村
02-01 6万+
一、前言 CRUD 自从使用了 vue2.0，就不想过多地去使用其他的含 JS 代码的前端框架如 BootStrap4、jQuery 等，想全程使用 vue 去搭建前端界面，因为 vue 的生态系统十分繁荣，ui 方面的库有 element-ui、iview 等。 这次①使用了vue搭建前端页面架构，绑定数据，②使用element-ui修饰界面。 二、搭建项目架构 具体可以去看之前的...
vue cli4——使用vue ui进行项目的创建及管理
jiyuzzz的博客
10-28 548
在vue cli3之后就可以使用vue的可视化项目管理工具了 直接在cmd输入命令：vue ui 启动即可，地址默认是localhost:8000 先查看版本 注意是大写的V vue -V 也可以用vue create （项目名）来创建项目 这里我们使用更简单的vue ui创建项目 vue ui 点击vue项目管理器 选择创建 选好项目路径以及名称 第一次使用时可以选择手动配置（之后可以选择保存这套配置） 勾选这4个就够了 babel，可将ES6语法转成ES5语法。 TypeScr.
vue+Element后台管理系统框架搭建（一）
sinat_33564062的博客
11-27 9236
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后台项目
九月萩的博客
01-02 3002
使用vue2.x搭建基础后台系统
pc端不同分辨率适配
qq_24343389的博客
08-17 1万+
1、以1920* 1080的设计稿为例，实现PC端不同分辨率适配 2、安装依赖 npm install --save lib-flexible 或者 yarn addlib-flexible -save npm installpx2rem-loader -D或者 yarn addpx2rem-loader npm 安装不上时可以用cnpm 3、在utils文件下新建 一个 js 文件 如viewport.js 代码如下 (function() { va...
用vue搭建管理后台
征途无悔
04-01 3510
前言 前面我们说的都是一些后台的事情，但是，其实我真正的弱项是前台。这里，我们就把前台的进程线路拉出来，开始推进。其实我之前写过两篇关于vue项目搭建的文章。但是，我这次遵照原来的文章更进行操作，虽然大体是通的，但是，一个事情分成了两篇文章，有些东西也存在问题。所以，这篇文章会从头开始讨论这些问题，完了，前两篇我会考虑删除掉。 构建 环境搭建 安装npm 我们这次编写的vue是基于前端工程化的，构...
基于Java SpringBoot和Vue的后台管理系统开发
资源摘要信息: "Java SpringBoot + Vue 后台管理系统是一套基于现代Web开发技术和Java语言的后台管理解决方案。该系统融合了SpringBoot框架的快速开发能力与Vue.js的前端高效渲染，旨在构建一个功能完备、操作便捷、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值