zoukankan      html  css  js  c++  java
  • 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 }
        ]
    });

  • 相关阅读:
    Select For Update使用场景   
    数据库的ACID特性
    Zookeeper和Eureka的区别
    SpringMvc的控制器是不是单例模式,如果是,有什么问题,怎么解决?
    如果你也用过struts2.简单介绍下springMVC和struts2的区别有哪些?
    如何理解Hibernate的延迟加载机制?在实际应用中,延迟加载与Session关闭的矛盾是如何处理的?
    延迟加载与session关闭的矛盾一般可以这样处理:
    举一个多对多关联的例子,并说明如何实现多对多关联映射。
    java的基本操作和基本知识技能
    HTML基础
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6762375.html
Copyright © 2011-2022 走看看