vue项目的搭建

安装vue-cli脚手架npm install -g @vue/cli
查看脚手架的版本 vue -V
创建项目 vue create project_name
选项
- Manually select features
- Babel Router Vuex Typescript
- 2.x（vue2）
- n（不使用历史模式路由）
- In dedicated config files(使用专用文件)
- N（不将配置保存为预设）
run 进去项目文件夹+npm run serve

项目文件介绍

引入element-ui

npm i element-ui -S
引入

3. 测试，在App.vue中引入如下内容，应该会出现按钮的样式

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

添加自己的页面

删除原来的HomeView和AboutView页面，在views下新建文件夹，分别是login和home

定义路由文件

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [

  {
    path: '/',
    redirect:'home'
  },


  {
    path: '/login',
    name: 'login',
    component: () => import( '../views/login/loginIndex.vue')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import( '../views/home/homeIndex.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

app.vue

<template>
  <div id="app">
    <router-view/>
  </div>


</template>

<style>
</style>

至此，应该可以完成最基本的跳转

登陆界面

<template>
    <div class="login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>


        </el-form>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    password: ''

                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                //页面跳转
                this.$router.push("/home");
            }

        }
    }
</script>

homeIndex.vue

<template>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
</template>

  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }
    
    body > .el-container {
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>

导入组件

<template>
    <el-container>
        <!-- 填充导入的内容 -->
       <NavMenu/>
        <el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
</template>


<script>
    //导入
    import NavMenu from './navMenu.vue'
    export default {
      data() {
        return {
  
        };
      },
      methods: {
  
  
      },
      //导入组件
      components:{
        NavMenu
      }
    }
  </script>


  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }
    
    body > .el-container {
      margin-bottom: 40px;
    }
    
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }
    
    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>

左侧导航栏

<template>

  <el-aside width="200px">

    <el-menu default-active="1" class="el-menu-vertical-demo">

      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">数据管理</span>
      </el-menu-item>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-menu"></i>
          信息管理</template>
        <el-menu-item index="3-1">列表管理</el-menu-item>
      </el-submenu>




    </el-menu>
  </el-aside>



</template>

<style>

</style>


<script>
  export default {
    data() {
      return {

      };
    },
    methods: {


    }
  }
</script>