从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

效果:

相关推荐
Return-Log9 分钟前
Matplotlab显示OpenCV读取到的图像
python·opencv
程序趣谈14 分钟前
算法随笔_36: 复写零
数据结构·python·算法
九亿AI算法优化工作室&36 分钟前
GWO优化LSBooST回归预测matlab
人工智能·python·算法·机器学习·matlab·数据挖掘·回归
weixin_307779131 小时前
在AWS上使用Flume搜集分布在不同EC2实例上的应用程序日志具体流程和代码
python·flask·云计算·flume·aws
LCG元1 小时前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian1 小时前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼2 小时前
【前端知识】常用CSS样式举例
前端·css
wl85112 小时前
vue入门到实战 三
前端·javascript·vue.js
sirius123451232 小时前
自定义数据集 ,使用朴素贝叶斯对其进行分类
python·分类·numpy
ljz20162 小时前
本地搭建deepseek-r1
前端·javascript·vue.js