从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

效果：