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 }
    ]
});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM