element UI 的学习一,路由跳转
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 的学习一,路由跳转的更多相关文章
- element ui Angular学习笔记(一)
1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入El ...
- vue+element的el-menu组件实现路由跳转及当前项的设置
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...
- element ui 登录验证,路由守卫
<template> <!-- el-form :label-position="labelPosition" 设置label的位置 :model 用来给表单设置 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- 【Flutter学习】页面跳转之路由及导航
一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...
- vue常用操作及学习笔记(路由跳转及路由传参篇)
路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...
- .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记
1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...
- vue里使用element饿了么的el-menu+vue-router实现路由跳转的两种方法
最近准备写一个echarts的可视化展示案例,首先用vue-cli3创建了一个项目(好像vue-cli4也出来,感觉变化不大,就没升级了) 然后,开始配置路由↓下面是我的router.js文件 imp ...
- JS高级学习笔记(9) 之 转:前端路由跳转基本原理
原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...
随机推荐
- MANIFEST.MF文件Class-Path:节点需要引入的jar太多解决方案
每行开头结尾都要有一个空格(半角的) 例子如下: Manifest-Version: 1.0 Class-Path: lib/mongo-java-driver-2.11.4.jar lib/guav ...
- RESTful概念理解
基础 REST 定义了一组体系架构原则,您可以根据这些原则设计以系统资源为中心的 Web 服务,包括使用不同语言编写的客户端如何通过 HTTP 处理和传输资源状态. 如果考虑使用它的 Web 服务的数 ...
- Orchard运用 - 特定主题添加独立代码文件
今天继续跟大家分享捣鼓Orchard的一些心得.其实有时一些问题或者Bugs还是蛮好解决的,主要看你采取哪种方式方法.比如有时我们为了扩展某些特性或功能,你可以搭建一个全新的模块来完成,如果临时的或简 ...
- 如何设置ESXi中的虚拟机随主机一同启动?
笔者新装了几台ESXi的主机, 其中一台上面运行着一台安装了vCenter的虚拟机. 笔者一路默认, 也没改什么设置. 在试图解决其他问题的过程中, 笔者重启了ESXi. 后来发现vCente登不进 ...
- Plugin with id 'com.github.dcendents.android-maven' not found
导入开源项目的时候老是报这个错 Error:(2, 0) Plugin with id 'com.github.dcendents.android-maven' not found 挺郁闷的,不知道是 ...
- JavaScript中的单引号和双引号解决
在使用JavaScript显示消息或者传递字符数据的时候,经常会碰到数据中夹杂单引号(')或者双引号("),这种语句往往会造成JavaScript报错.对此一般采用/'或者/"的解 ...
- FatSecret Platform API
在现阶段饮食类的APP发展的非常迅猛,尤其在校园中,学生只需要凭借一个手机就能买到自己想要的食物,真正做到了足不出户.可是如果我们想独立完成一个app就需要有相应的数据支持,这里给大家介绍一个国外的开 ...
- RS中的关系引用不明确以及行列自动添加了追溯
问题1:由于在FM模型的物理层是自己新建了查询主题,查询主题采用对已经存在的表进行sql处理然后重命名, 使用的是sql类型的数据源,sql类型设置的查询类型是默认的cognos类型,而语法是本地的结 ...
- Cocos2d-x -- 图片菜单按钮
Scene* MainMenu::createScene() { // 'scene' is an autorelease object auto scene = Scene::create(); / ...
- Python 多重循环
# coding=gbk LOL1 = ['OMG', 'EDG', '皇族'] LOL2 = ['韩国', '欧洲', '美国'] for l1 in LOL1: for l2 in LOL2: p ...