Vue3 + Element-UI 搭建一个后台管理系统框架模板

这篇具有很好参考价值的文章主要介绍了Vue3 + Element-UI 搭建一个后台管理系统框架模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概述

本文将介绍如何基于Vue3和element-ui搭建一个后台管理系统框架模板。我们将详细讲解代码流程,并提供详细的说明。

技术栈

  • Vue3
  • Element-ui
  • Axios

前置知识

本文假设读者已经熟悉Vue3和Element-ui的基本使用方法,并且对Axios有一定的了解。

步骤

步骤1:创建Vue3项目

我们可以使用Vue CLI来创建一个Vue3项目,具体步骤如下:

  1. 打开命令行工具,在任意目录下输入以下命令:

    vue create {项目名称}
    
  2. 选择“Manually select features”选项(手动选择特性),按回车键进入下一步。

  3. 按下空格键选择以下特性:

    • Choose Vue version(选择Vue版本):选择“3.x”。
    • Babel(使用Babel编译器):选中。
    • Router(使用Vue Router进行路由管理):选中。
    • Vuex(使用Vuex进行状态管理):选中。
    • CSS Pre-processors(使用CSS预处理器):选中。
    • Linter / Formatter(使用ESLint进行代码检查和格式化):选中。
  4. 确认选择,按回车键进入下一步。

  5. 选择CSS预处理器,我们可以使用Sass或Less,这里以Sass为例,按下空格键选中“Sass/SCSS (with dart-sass)”选项,按回车键确认选择。

  6. 确认是否使用history模式进行路由管理,这里我们选择“n”(不使用),按回车键进入下一步。

  7. 确认是否安装依赖,我们选择“npm”或“yarn”,按回车键确认选择。

  8. 等待依赖安装完成,项目创建成功。

步骤2:安装Element-ui

我们可以使用npm或yarn来安装Element-ui,具体步骤如下:

  1. 打开命令行工具,在项目根目录下输入以下命令:

    npm install element-plus --save
    或
    yarn add element-plus
    
    
  2. 等待依赖安装完成,Element-ui安装成功。

步骤3:配置Element-ui

我们需要在main.js中引入Element-ui并按需引入组件,具体步骤如下:

  1. 在main.js中引入Element-ui:

    import { createApp } from 'vue'
    import App from './App.vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/lib/theme-chalk/index.css'
    
    createApp(App).use(ElementPlus).mount('#app')
    
    
  2. 在需要使用的组件中按需引入:

    import { ElButton, ElInput } from 'element-plus'
    
    export default {
      components: {
        ElButton,
        ElInput
      }
    }
    
    

步骤4:封装Axios

我们可以在项目中封装Axios,方便进行网络请求,具体步骤如下:

  1. 在src目录下创建一个api目录,用于存放Axios相关代码。

  2. 在api目录下创建一个index.js文件,用于封装Axios:

    import axios from 'axios'
    
    const instance = axios.create({
      baseURL: process.env.VUE_APP_BASE_API,
      timeout: 5000,
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    })
    
    instance.interceptors.request.use(
      config => {
        const token = localStorage.getItem('token')
        if (token) {
          config.headers.Authorization = token
        }
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    instance.interceptors.response.use(
      response => {
        return response.data
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    export default instance
    
    
  3. 在main.js中引入Axios:

    import axios from './api'
    
    const app = createApp(App)
    
    app.config.globalProperties.$http = axios
    
    

步骤5:创建路由

我们需要在router/index.js文件中配置路由,具体步骤如下:

  1. 在router目录下创建一个index.js文件,用于配置路由:

    import { createRouter, createWebHistory } from 'vue-router'
    import Home from '../views/Home.vue'
    import About from '../views/About.vue'
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: About
      }
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router
    
    
  2. 在main.js中引入路由:

    import router from './router'
    
    const app = createApp(App)
    
    app.use(router)
    
    

步骤6:创建页面

我们需要在views目录下创建页面,具体步骤如下:

  1. 在views目录下创建一个Home.vue文件,用于展示首页内容:

    <template>
      <div>
        <h1>首页</h1>
        <el-button type="primary">点击按钮</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Home'
    }
    </script>
    
    <style scoped>
    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }
    </style>
    
    
  2. 在views目录下创建一个About.vue文件,用于展示关于页面内容:

    <template>
      <div>
        <h1>关于</h1>
        <el-input placeholder="请输入内容"></el-input>
      </div>
    </template>
    
    <script>
    export default {
      name: 'About'
    }
    </script>
    
    <style scoped>
    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }
    </style>
    
    

步骤7:创建菜单

我们可以使用Element-ui的菜单组件创建菜单,具体步骤如下:

  1. 在App.vue中添加菜单:

    <template>
      <div id="app">
        <el-container>
          <el-header>Header</el-header>
          <el-container>
            <el-aside width="200px">
              <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                  <template slot="title">导航一</template>
                  <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="/">首页</el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group>
                    <template slot="title">分组二</template>
                    <el-menu-item index="/about">关于</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-aside>
            <el-main>
              <router-view></router-view>
            </el-main>
          </el-container>
          <el-footer>Footer</el-footer>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    
  2. 在router/index.js中添加菜单对应的路由信息:

    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: About
      }
    ]
    
    

总结

本文介绍了如何基于Vue3和Element-ui搭建一个后台管理系统框架模板。我们从创建Vue3项目、安装和配置Element-ui、封装Axios、创建路由、创建页面和创建菜单等方面进行了详细的讲解。希望本文能够帮助读者更好地理解Vue3和Element-ui的使用方法,以及如何构建后台管理系统框架模板。文章来源地址https://www.toymoban.com/news/detail-425872.html

到了这里,关于Vue3 + Element-UI 搭建一个后台管理系统框架模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-element-admin:基于element-ui 的一套后台管理系统集成方案

    1.1简介 vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 GitHub地址:https://github.com/PanJiaChen/vue-element-admin 项目在线预览:https://panjiachen.gitee.io/vue-element-admin 1.2安装 如果上面的install报错 则先执行下面的命令,再install 2.1简介 vueAdmin-template是基于vue-element-admin的一套

    2023年04月16日
    浏览(45)
  • 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理(商品列表)

    目录 商品列表 一.创建一个子分支 二.创建组件 三.绘制商品列表的页面基本结构 1.面包屑导航  2.卡片视图区域 四.功能 1.搜索  2.删除  3.添加 五.提交代码 git branch——查看当前所在分支 git checkout -b goods_list——创建新的子分支goods_list git branch——查看当前所在分支 git pus

    2024年02月08日
    浏览(54)
  • Vue+Element-UI搭建admin-shiro-ui后台页面

    后端代码:https://blog.csdn.net/qq_45660133/article/details/128498518 官网下载地址 http://nodejs.cn/download,如图所示: 安装 Node.js 淘宝镜像加速器( npm ) 安装 vue-cli 安装Webpack: js打包即压缩(可以忽略) 根据下面图片选择配置:空格是选择,回车是确认!! 在main.js 里面引用element-ui 组件 创

    2024年01月22日
    浏览(47)
  • 基于vue-cli创建后台管理系统前端页面——element-ui,axios,跨域配置,布局初步,导航栏

    1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请求添加Jwt的设置; 3.进行初始化布局,引入新增页面的方式; 4.home页面导航栏的设置,一级目录,二级目录; 安装成功 布局初步 1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请

    2024年02月09日
    浏览(52)
  • 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建

    1. 从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 一、了解Element-ui  1.Element-UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制 2.官网  地址:https:

    2024年02月12日
    浏览(41)
  • VSCODE VUE3 element-ui plaus 环境搭建

        目录 一、VUE 1、安装VUE 2、创建项目  二、Element Plus 1、在项目目录中安装 Element Plus,执行 2、引入element 三、vscode 中运行 1、打开项目文件夹 2、点击debug,运行 1)、首次lanch  chrome时 2)、lanch node.js   3)、加入elementui 看看起作用不 最近学习针灸,突然想搭建一个针灸

    2024年02月12日
    浏览(61)
  • 搭建vue3项目+按需引入element-ui框架组件

    场景 :使用vue create脚手架快速搭建vue的项目 前提 :需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 查看安装的版本(显示版本号说明安装成功) 1.cmd窗口跳到需要新建项目的文件夹下,使用vue create 2.我这里选择第三个Ma

    2024年02月16日
    浏览(61)
  • Vue+Element-ui+SpringBoot搭建后端汽车租赁管理系统

    最近在做项目,花了一周的时间搭建了一个十分完备的汽车租赁后端管理系统。页面采用 纯Vue2+Element-ui搭建 ,后端采用 Springboot+Mybatis 搭建,数据库采用 Mysql 。包括了登录验证,根据不同权限进入不同界面、数据增删改查、表格分页、表格excel导出等等功能。已开源至git,在

    2024年02月09日
    浏览(46)
  • vue3初始搭建项目完整教程 vue3 + vite + element-ui + axios

    1. 安装 2. 创建目录 3. 在router下新增index.js 4.修改main.ts 1. 新增文件夹 2. 新增Home.vue和About.vue 1. 修改app.vue 1.unplugin-auto-import 2. 在vite.config.js中引入 1.安装element-ui 2. 按需导入 3.在vite.config.js新增插件 4.测试是否引入成功 5.如果报错 1. 网上下载reset.css 2.在assets中新增css文件夹 3.将

    2024年02月16日
    浏览(83)
  • 【vue3-element-admin 】基于 Vue3 + Vite4 + TypeScript + Element-Plus 从0到1搭建后台管理系统(前后端开源)

    vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案,技术栈为 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等当前主流框架。 相较于其他管理前端框架,vue3-element-admin 的优势在于 一有一无 (有配套后端、无复杂封装): 配套完整 Java 后

    2023年04月26日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包