从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

效果:

相关推荐
JJJJ_iii3 分钟前
【深度学习05】PyTorch:完整的模型训练套路
人工智能·pytorch·python·深度学习
树叶会结冰3 分钟前
HTML语义化:当网页会说话
前端·html
冰万森9 分钟前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr22 分钟前
Ajax 技术详解
前端
浩男孩31 分钟前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学35 分钟前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空1 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序员小远1 小时前
常用的测试用例
自动化测试·软件测试·python·功能测试·测试工具·职场和发展·测试用例
IT学长编程1 小时前
计算机毕业设计 基于EChants的海洋气象数据可视化平台设计与实现 Python 大数据毕业设计 Hadoop毕业设计选题【附源码+文档报告+安装调试】
大数据·hadoop·python·毕业设计·课程设计·毕业论文·海洋气象数据可视化平台