vue2版本《后台管理模式》（上）

爱敲码的老余

已于 2023-02-16 11:02:14 修改

阅读量1.4k

点赞数 4

文章标签： javascript 前端 vue.js

于 2023-02-15 20:17:36 首次发布

本文链接：https://blog.youkuaiyun.com/www61621/article/details/129049127

版权

本文是关于Vue2版本后台管理系统的开发经验分享，涵盖了app出口位置、路由配置、package.json文件、插件引入及跨域问题的解决。通过详细步骤，指导读者进行项目的初始化设置，为后续的登录验证和主要内容开发打下基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台管理模式项目开发经验总结如下，希望对你们有些帮助：

首先需要一个完整的v2版本的项目

vue2版本思路：首先需要手工创建一个vue@cli
整个项目分为三部分：头部（标题：通用管理系统）主体（左侧下拉列表和右侧主体内容）尾部（Frontend 2022 Csaey）。

正文如下：

一、app 出口位置

<template>
  <div id="app">
    <router-view></router-view>
    <!-- <i class="fa fa-wifi"></i> -->
  </div>
</template>

<script>
export default {
   
  name: "App",
  components: {
   },
  mounted() {
   },
};
</script>

<style>
@import url("./assets/css/reset.css");
html,
body {
   
  width: 100%;
  height: 100%;
}
#app {
     
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>

二、 index.js 路由配置

完整版：
需要写哪点再配置哪点慢慢捋思路

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   
    routes: [
        {
   
            path: '/',
            redirect:'login',
            name: '登录页',
            hidden:true,
            component: ()=>import("@/components/Login")
        },
        {
   
            path: '/login',
            name: 'login',