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