从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

效果:

相关推荐
用户8356290780512 分钟前
告别冗余:用Python删除PDF中的超链接
后端·python
Joyee69119 分钟前
RN 的初版架构——通信机制
前端·react native
Swift社区21 分钟前
从 0 到 1 构建一个完整的 AGUI 前端项目的流程在 ESP32 上运行
前端·算法·职场和发展
fox_22 分钟前
JS: 实现扁平化函数 flat
javascript
剽悍一小兔27 分钟前
小程序到底用Store还是LocalStorage ?
javascript
一只小风华~40 分钟前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
Jerry_Rod1 小时前
react+umijs 项目快速学习
前端·react.js
京东云开发者1 小时前
浅析cef在win和mac上的适配
前端
uhakadotcom1 小时前
在chrome浏览器插件之中,options.html和options.js常用来做什么事情
前端·javascript·面试