1、项目开始;
 # 安装vue
    $ cnpm install vue@2.1.6
    # 全局安装 vue-cli
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目my-project
    $ vue init webpack my-project
    # 进入项目目录
    $ cd my-project
    # 安装依赖,走你
    $ cnpm install
    # 运行项目
    $ cnpm run dev

2、安装element-ui
  $ cnpm i element-ui@1.0.9
    固定版本号
  建议固定vue和element-ui的版本,避免将来版本升级后产生冲突
3、  引入element-ui
   
    在app.vue引入element-ui,然后就可以在其他任何页面中使用了
    import Element from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    Vue.use(Element)
4.el-menu 路由的使用;
5、字体;font-family: "Helvetica Neue",Helvetica,"PingFang SC",
"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
6、<div id="sideBar">
            <!--<ul>
                <router-link to="/manifests" tag="li">日消费明细</router-link>
                <router-link to="/daily" tag="li">日消费清单</router-link>
                <router-link to="/monthly" tag="li">月消费清单</router-link>
                <router-link to="/yearly" tag="li">年消费清单</router-link>
            </ul>-->
            <el-menu default-active="manifests" theme="dark" v-bind:router="true">
                <el-menu-item index="manifests">日消费明细</el-menu-item>
                <el-menu-item index="daily">日消费清单</el-menu-item>
                <el-menu-item index="monthly">月消费清单</el-menu-item>
                <el-menu-item index="yearly">年消费清单</el-menu-item>
            </el-menu>
        </div>
路由部分对应JS代码
const router = new VueRouter({
    routes: [
        { name: "manifests", path: "/manifests", component: Manifests },
        { name: "daily", path: "/daily", component: Daily },
        { name: "monthly", path: "/monthly", component: Monthly },
        { name: "yearly", path: "/yearly", component: Yearly }
    ]
});

element UI 的学习一,路由跳转的更多相关文章

  1. element ui Angular学习笔记(一)

    1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入El ...

  2. vue+element的el-menu组件实现路由跳转及当前项的设置

    <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...

  3. element ui 登录验证,路由守卫

    <template> <!-- el-form :label-position="labelPosition" 设置label的位置 :model 用来给表单设置 ...

  4. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  5. 【Flutter学习】页面跳转之路由及导航

    一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...

  6. vue常用操作及学习笔记(路由跳转及路由传参篇)

    路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...

  7. .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记

    1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...

  8. vue里使用element饿了么的el-menu+vue-router实现路由跳转的两种方法

    最近准备写一个echarts的可视化展示案例,首先用vue-cli3创建了一个项目(好像vue-cli4也出来,感觉变化不大,就没升级了) 然后,开始配置路由↓下面是我的router.js文件 imp ...

  9. JS高级学习笔记(9) 之 转:前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

随机推荐

  1. Kotlin【简介】Android开发 配置 扩展

    重要资源 官方资源:官网 . 官网源码 .官网文档 . 在线 IDE .GitHub 中文资源:中文官网 .中文文档  离线文档:PDF 文件 . PDF 文件 GitBook 版 .ePUB 文件  ...

  2. Hibernate 延迟载入

    一.延迟载入定义                 延迟载入,也叫懒载入,它是Hibernate为提高程序运行效率而提供的一种机制,即当仅仅有真正使用该对象的数据时才会创建. 说白了,所谓的延迟载入不是 ...

  3. Linux磁盘扩容

    Linux磁盘扩容 fdisk -l # 查看硬盘信息 lvextend -L +1G /dev/mapper/vg00-lvroot 或者 lvextend -l +%FREE /dev/mappe ...

  4. 使用ionic播放轮询广告的方法

    使用ionic中的ion-slide-box实现,下面是完整的代码示例: <!DOCTYPE html> <html ng-app="app"> <h ...

  5. Java中解压文件名有中文的rar包出现乱码问题的解决

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  6. JDK中枚举的底层实现

    前提 上一篇文章复习介绍了JDK中注解的底层实现,跟注解一样比较常用,但是底层实现比较神秘的还有枚举类型.趁着国庆假期的最后两天,把JDK中枚举的底层实现也进行一次探究. 通过例子查找本质 在探究JD ...

  7. Python dict的特点

    dict的特点 1:查找速度快 2:浪费空间 3:key不可以重复,且不可变 4:数据无序排放 dict的第一个特点是查找速度快,无论dict有10个元素还是10万个元素,查找速度都一样.而list的 ...

  8. ant design pro (七)和服务端进行交互

    一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟 ...

  9. 视频编码格式转换 MP4

    视频工具有很多,如专业的premiere,但是我们只要涉及后期转换,不涉及制作,所以用不到这末专业的工具. 一般来说,使用暴风转码或者qq影音工具就足以应付我们的日常转换需求,下面以qq影音软件做说明 ...

  10. SQLSERVER中的 CEILING函数和 FLOOR函数

    SQLSERVER中的 CEILING函数和 FLOOR函数 --SQLSERVER中的 CEILING函数和 FLOOR函数 --ceiling函数返回大于或等于所给数字表达式的最小整数. --fl ...