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 }

    ]

});