一、項目初始化

創建webpack模板項目如下所示：

MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project? Project name luffy_project? Project description A Vue.js project? Author hqs? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? No? Set up unit tests No? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) npmvue-cli · Generated "luffy_project".

根據提示啟動項目：

$ cd luffy_project/$ npm run dev

由于在初始化時選擇了vue-router，因此會自動創建/src/router/index.js文件。

刪除Helloworld組件相關信息后，index.js文件內容如下所示：

import Vue from 'vue'import Router from 'vue-router'// @絕對路徑 檢索到 ...src/// 如果Router當做局部模塊使用一定要Vue.use(Router)// 以后在組件中，可以通過this.$router 獲取Router實例化對象// 路由信息對象 this.$routes 獲取路由配置信息Vue.use(Router)// 配置路由規則export default new Router({routes: [{'path': '/'}]})

二、基于ElementUI框架實現導航欄

1、elementUI——適合Vue的UI框架

elementUI是一個UI庫，它不依賴于vue，但確是當前和vue配合做項目開發的一個比較好的UI框架。

（1）npm安裝

推薦使用 npm 的方式安裝，能更好地和 webpack 打包工具配合使用。

$ npm i element-ui -S

（2）CDN

目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用。

<!-- 引入樣式 --><link rel="stylesheet"  rel="external nofollow" ><!-- 引入組件庫 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>

使用CND引入 Element 需要在鏈接地址上鎖定版本，以免將來 Element 升級時受到非兼容性更新的影響。鎖定版本的方法請查看 unpkg.com。

2、引入 Element

在項目中可以引入整個Element，或者是根據需要僅引入部分組件。

（1）完整引入

在 main.js 中寫入如下內容：

import Vue from 'vue'import App from './App'import router from './router'// elementUI導入import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css' // 注意樣式文件需要單獨引入// 調用插件Vue.use(ElementUI);Vue.config.productionTip = false;/* eslint-disable no-new */new Vue({el: '#app',router,components: { App },template: '<App/>'});

以上代碼便完成了 Element 的完整引入。

嘗試在App.vue使用elementui的Button按鈕：