一、下载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. idea生成get/set方法

    如图:

  2. instanceof用来判断啥？

    java中的instanceof运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例.

  3. maven入门问题解决

    记录入门使用maven的问题和解决方法: 一.用mvn clean compile编译报错/ 或者在IDE中编译时,Problem视图显示错误:无法从maven服务器或者私有服务器或者某个网站中中下载 ...

  4. Azure Monitor Kibana configuration always seems to send over SSL

    https://github.com/elastic/logstash/issues/10125 https://blogs.cisco.com/security/step-by-step-setup ...

  5. 邻近双线性插值图像缩放的Python实现

    最近在查找有关图像缩放之类的算法,因工作中需要用到诸如此类的图像处理算法就在网上了解了一下相关算法,以及其原理,并用Python实现,且亲自验证过,在次与大家分享. 声明:本文代码示例针对的是plan ...

  6. JVM(2) JVM内存模型

    一.概述 Java的内存管理采用[自动内存管理]机制,因为这个自动管理机制,Java程序员就不需要去写释放内存的代码,而且不容易出现内存泄漏问题(比C/C++程序员少一些烦恼).但是由于内存的申请和释 ...

  7. （转）Intellij IDEA 自动生成 serialVersionUID

    转自 : https://blog.csdn.net/tiantiandjava/article/details/8781776 Setting->Inspections->Seriali ...

  8. GMSSL中生成SM2或RSA1024或RSA2048的证书相关命令

    1.生成KEY:gmssl sm2 -genkey -out 01.root.pemgmssl genrsa -out 01.root_plain.key 2048gmssl genrsa -out ...

  9. 前端 CSS的选择器 基本选择器

    基本选择器包括: 标签选择器 类选择器 ID选择器 通用选择器 标签选择器 就是通过标签名来选择元素: 选中p标签 <!DOCTYPE html> <html lang=" ...

  10. STM32 debug setting 闪退

    闪退user文件夹里旧版本文件  有个同名的  uvprojt类型的文件删了即可