使用vue2和elementui还有scss写一个html页面

好的，我可以为您提供一个简单的示例，其中包括Vue.js 2、ElementUI和SCSS，用于创建一个具有导航栏、侧边栏和主要内容区域的HTML页面。

首先，您需要安装Vue.js和ElementUI：

npm install vue@2.6.14
npm install element-ui@2.15.1

然后，您需要安装SCSS依赖项：

npm install node-sass@4.14.1 sass-loader@10.1.1 --save-dev

接下来，您可以创建一个Vue组件，并在其中使用ElementUI组件和SCSS样式。以下是一个简单的示例，其中包括一个具有导航栏、侧边栏和主要内容区域的页面：

<template>
  <div class="app">
    <el-header class="header">
      <div class="logo">My App</div>
      <el-menu class="menu" mode="horizontal" :default-active="activeMenu" @select="handleMenuSelect">
        <el-menu-item index="home">Home</el-menu-item>
        <el-menu-item index="about">About</el-menu-item>
        <el-menu-item index="contact">Contact</el-menu-item>
      </el-menu>
    </el-header>
    <el-container class="container">
      <el-aside class="aside">
        <el-menu class="menu" :default-active="activeSubMenu" @select="handleSubMenuSelect">
          <el-submenu index="sub1">
            <template slot="title">Submenu 1</template>
            <el-menu-item index="sub1-1">Submenu 1-1</el-menu-item>
            <el-menu-item index="sub1-2">Submenu 1-2</el-menu-item>
            <el-menu-item index="sub1-3">Submenu 1-3</el-menu-item>
          </el-submenu>
          <el-submenu index="sub2">
            <template slot="title">Submenu 2</template>
            <el-menu-item index="sub2-1">Submenu 2-1</el-menu-item>
            <el-menu-item index="sub2-2">Submenu 2-2</el-menu-item>
            <el-menu-item index="sub2-3">Submenu 2-3</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';

export default {
  name: 'App',
  data() {
    return {
      activeMenu: 'home',
      activeSubMenu: 'sub1-1'
    };
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
    ...mapGetters('myModule', ['myModuleGetter']),
    ...mapActions(['increment'])
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index;
    },
    handleSubMenuSelect(index) {
      this.activeSubMenu = index;
    }
  }
};
</script>

<style lang="scss">
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      font-size: 24px;
      font-weight: bold;
      margin-left: 20px;
    }
    .menu {
      border: none;
      background-color: transparent;
      font-size: 16px;
      &::after {
        display: none;
      }
      .el-menu-item {
        padding: 0 20px;
        &:hover {
          background-color: #f2f2f2;
        }
        &.is-active {
          background-color: #e6e6e6;
        }
      }
    }
  }
  .container {
    flex: 1;
    display: flex;
    .aside {
      width: 200px;
      background-color: #f2f2f2;
      .menu {
        border: none;
        background-color: transparent;
        font-size: 16px;
        &::after {
          display: none;
        }
        .el-submenu__title {
          padding: 0 20px;
        }
        .el-menu-item {
          padding: 0 40px;
          &:hover {
            background-color: #f2f2f2;
          }
          &.is-active {
            background-color: #e6e6e6;
          }
        }
      }
    }
    .main {
      flex: 1;
      padding: 20px;
      background-color: #ffffff;
    }
  }
}
</style>

此示例还包括使用Vuex的一些基本示例，以及使用Vue Router在主要内容区域中呈现组件。请注意，此示例不是完整的Vue应用程序，但可用作起点来构建更复杂的应用程序。