从0开始搭建vue + flask 旅游景点数据分析系统(二):搭建基础框架

这一期目标是把系统的布局给搭建起来,采用一个非常简单的后端管理风格,可以参考官方的页面
https://element.eleme.cn/#/zh-CN/component/container

下面我们开始搭建,首先,安装一下vue-router,element-ui

bash 复制代码
npm install vue-router@3
npm install element-ui

然后在src目录下创建layouts文件夹和router文件夹 ,

在layouts文件夹下建立Layout.vue文件

jsx 复制代码
<template>
  <el-container class="container">
    <el-aside width="200px" style="background-color: rgb(229,227,238)">
      <el-menu :default-active="activeIndex" active-text-color="#BAA7FFFF"	class="el-menu-vertical">
        <el-menu-item index="/dashboard" @click="navigateTo('/dashboard')">Dashboard</el-menu-item>
        <el-menu-item index="/users" @click="navigateTo('/users')">Users</el-menu-item>
        <!-- 其他菜单项 -->
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div class="logo">My Admin</div>
      </el-header>

      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/dashboard'
    };
  },
  methods: {
    navigateTo(path) {
      console.log(this.activeIndex);
      if (this.$route.path !== path) {
        this.activeIndex = path;
        this.$router.push(path);
      }
    }
  }
};
</script>

<style scoped>
.container{
  height: 100vh;
  border: 1px solid #eee;
}

.header {
  background-color: #ffffff;
  text-align: center;
  line-height: 60px;
  border-bottom: 1px solid #ebeef5;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.main {
  padding: 20px;
}
</style>

在router下建立index.js文件,

jsx 复制代码
import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/layouts/Layout';

// 引入页面组件
import Dashboard from '@/views/Dashboard';
import Users from '@/views/Users';

Vue.use(Router);

const routes = [
    {
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        children: [
            {
                path: 'dashboard',
                component: Dashboard,
                name: 'Dashboard'
            },
            {
                path: 'users',
                component: Users,
                name: 'Users'
            }
            // 其他子路由
        ]
    },
    // 其他路由
];

const router = new Router({
    mode: 'history',
    routes
});

export default router;

因为想访问 / 直接转到 /dashboard ,所以有这行设置:

sql 复制代码
 redirect: '/dashboard',

还需要新建views文件夹,新增两个vue文件Dashboard.vue和Users.vue

jsx 复制代码
<!-- Dashboard.vue -->
<template>
  <div className="dashboard">
    <h1>Dashboard</h1>
    <!-- Dashboard 内容 -->
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
};
</script>

<style scoped>
.dashboard {
  /* 样式 */
}
</style>

<!-- Users.vue -->
<template>
  <div class="users">
    <h1>Users</h1>
    <!-- Users 内容 -->
  </div>
</template>

<script>
export default {
  name: 'Users'
};
</script>

<style scoped>
.users {
  /* 样式 */
}
</style>

修改main.js ,引入上面我们新增的内容:

jsx 复制代码
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'

Vue.use(ElementUI)

Vue.config.productionTip = false

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

运行程序:

jsx 复制代码
npm run serve

效果:

相关推荐
不想有bug的小菜鸟1 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238632 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559602 分钟前
前端代理,解决跨域问题讲解
前端
quitv7 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238116 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星18 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
紫雾凌寒28 分钟前
计算机视觉 |解锁视频理解三剑客——TimeSformer
python·深度学习·神经网络·计算机视觉·transformer·timesformer
一粒沙-37 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen41 分钟前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http