基于vue-cli创建后台管理系统前端页面——element-ui，axios，跨域配置，布局初步

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

进行配置

main.js中引入+添加jwt

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'

// axios的前端请求拦截器，每次都会加header

axios.interceptors.request.use(
  config => {
    let jwt = localStorage.getItem('jwt');
    if(jwt){
      config.headers.jwt = jwt; // {headers:{'jwt':jwt}}
    }
    return config;

  }
)

Vue.prototype.$axios = axios
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

前端跨域配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080,
      proxy: {
        "/api": { // 1.修改端口号
          // （后端服务器地址）
          target: 'http://127.0.0.1:10002',   // 2.配置代理服务器
          changeOrigin: true, // 3.允许跨域请求
          pathRewrite: {
            // '^/api': '/' // 4.把代理路径的api删除，类似正则表达
          }
        }
      }
    }
})

进行初始布局

HomeView.vue

<template>
  <el-container style="height: 100%">
    <el-header style="background-color: rgb(249, 195, 195);">Header</el-header>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(241, 241, 202);">Aside</el-aside>
      <el-main style="background-color: rgb(182, 182, 231);">Main</el-main>
    </el-container>
  </el-container>

</template>

<script>
 export default{
 data() {
 return {};
 },
 methods: {}
 

}
</script>

<style scoped>

</style>

布局初步

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>

\*{
 padding: 0;
 margin: 0;
}
html,body,#app{
 height: 100%;
}

</style>

新增页面和引入

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
const Login  = () => import ("../components/Login.vue")


Vue.use(VueRouter)

const routes = [
  {path: '/',name: 'login',component: Login},
  {path: '/home',name: 'home',component: HomeView},
]

const router = new VueRouter({
  routes
})

export default router

home页面导航栏

<template>
  <el-container style="height: 100%">
    <el-header style="background-color: rgb(249, 195, 195);">Header</el-header>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(241, 241, 202);">
        <el-col width="200px">
          <el-menu
 default-active="2"
 class="el-menu-vertical-demo"
 @open="handleOpen"
 @close="handleClose">
            <el-submenu :index="menu.id" 
 v-for="menu in menuList" :key="menu.id">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ menu.name }}</span>
              </template>
                <el-menu-item-group>
                  <el-menu-item :index="cmenu.link" 
 v-for="cmenu in menu.childrenMenu" :key="cmenu.id">
                    {{ cmenu.name }}
                  </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
          </el-menu>
      </el-col>

      </el-aside>
      <el-main style="background-color: rgb(182, 182, 231);">Main</el-main>
    </el-container>
  </el-container>

</template>


### 最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![css源码pdf](https://img-blog.csdnimg.cn/img_convert/4c09bc96691721d2fa9bf1fc856fe7f4.webp?x-oss-process=image/format,png)

![JavaScript知识点](https://img-blog.csdnimg.cn/img_convert/6e3fc82d4f6e325919b6dd104589daa2.webp?x-oss-process=image/format,png)


们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-cG6DTeEm-1715231378516)]

[外链图片转存中...(img-twjqKCG8-1715231378517)]