一、下载vue2.x，下载element-ui.js以及css

二、html文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/element-ui.css"/>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">

            body{

                margin:0;

                padding:0;

            }

            .el-container{

                max-width:1200px;

                margin:0 auto;

            }

            .el-menu-item{

                width:25%;

                text-align:center;

                font-size:1.075rem;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <el-container>

              <el-header>

                  <el-menu :default-active="common.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

                    <el-menu-item index="0">section1</el-menu-item>

                    <el-menu-item index="1">section2</el-menu-item>

                    <el-menu-item index="2">section3</el-menu-item>

                    <el-menu-item index="3">section4</el-menu-item>

                  </el-menu>

              </el-header>

              <el-main>

                  <section v-show="common.activeIndex=='0'">main1</section>

                  <section v-show="common.activeIndex=='1'">main2</section>

                  <section v-show="common.activeIndex=='2'">main3</section>

                  <section v-show="common.activeIndex=='3'">main4</section>

              </el-main>

            </el-container>

        </div>

        <script type="text/javascript">

            ;(function(){

                new Vue({

                    el:"#app",

                    data(){

                        return {

                            common:{

                                activeIndex:"0",

                            },

                            main1:{

                            },

                            main2:{

                            },

                            main3:{

                            },

                            main4:{

                            },

                        }

                    },

                    methods:{

                        handleSelect(key, keyPath) {

                            const hash = ["section1","section2","section3","section4"];

                            window.location.hash = hash[parseInt(key)];

                            this.common.activeIndex = key;

                        }

                    },

                    created() {

                        let hash = window.location.hash;

                        const hashArr = ["#section1","#section2","#section3","#section4"];

                        let hashIndex = hashArr.indexOf(hash);

                        this.common.activeIndex = (hashIndex==-1?0:hashIndex).toString();

                    },

                    mounted() {

                    }

                })

            })();

        </script>

    </body>

</html>

基于cdn方式的vue+element-ui的单页面架构的更多相关文章

  1. vue踩坑：vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  2. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  3. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  4. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  5. 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

    世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

  6. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  7. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  8. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  9. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

随机推荐

  1. iOS-7-Cookbook

    https://github.com/liubin1777/iOS-7-Cookbook 版权声明:本文为博主原创文章,未经博主允许不得转载.

  2. oracle触发器update本表数据

    功能: 1. 允许/限制对表的修改 2. 自动生成派生列,比如自增字段 3. 强制数据一致性 4. 提供审计和日志记录 5. 防止无效的事务处理 6. 启用复杂的业务逻辑 开始 create trig ...

  3. 整体二分初探 两类区间第K大问题 poj2104 & hdu5412

    看到好多讲解都把整体二分和$CDQ$分治放到一起讲 不过自己目前还没学会$CDQ$分治 就单独谈谈整体二分好了 先推荐一下$XHR$的 <浅谈数据结构题的几个非经典解法> 整体二分在当中有 ...

  4. 十二、python字符串方法汇总

    '''1. index():检测字符串str1中是否包含字符串str2 语法:str1.index(str2,beg,end) str:指定检索的字符串:beg开始的索引,默认为0:end结束的索引, ...

  5. 线性代数之——SVD 分解

    SVD 分解是线性代数的一大亮点. 1. SVD 分解 \(A\) 是任意的 \(m×n\) 矩阵,它的秩为 \(r\),我们要对其进行对角化,但不是通过 \(S^{-1}A S\).\(S\) 中的 ...

  6. day57——ajax之初体验

    转行学开发,代码100天——2018-05-12 今天是一个特别的日子——首先是母亲节,在此也祝福亲爱的妈妈健康长寿.其次今天是汶川大地震10周年,10年过去了,经历过苦难的人更加坚毅勇敢地面向未来! ...

  7. VMware vMotion 配置要求

    目录 目录 vCenter 支持 vMotion 的前提 条件 vMotion 的主机配置 vMotion 共享存储器要求 vMotion 网络要求 最后 vCenter 支持 vMotion 的前提 ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_1_序列化和反序列化的概述

  9. python3 configparser模块

    配置文件如下: import configparser conf = configparser.ConfigParser() print(type(conf)) #conf是类 conf.read(' ...

  10. 一个有关Golang Deferred Function 执行顺序的问题

    先看一下一段关于defer的解释, 引自<Go程序设计语言> Syntactically, a defer statement is an ordinary function or met ...