Vue中使用Elememt-UI構建管理后臺（詳細教程）

安裝

我使用的是 vue-cli 初始化項目，命令如下：

修改 package.json 文件：

之后執行 npm install 進行安裝依賴，如果安裝速度有點慢的話，可以試一下 cnpm ，具體安裝和用法自行查找。

簡單介紹下項目的目錄結構：

之后在項目根目錄執行 npm run dev ，打開瀏覽器輸入 http://localhost:8080 就可以查看了。

目標

路由

路由使用的是 vue-router，具體用法可參考 官方文檔

我們這里需要兩個路由：

src/router/index.js

登錄頁面

src/components/Login.vue

首頁

src/components/Index.vue

App

src/App.vue

調用 API

src/api/index.js

config

src/config.js 這里配置登錄 oauth 需要的 client_id 和 secret

main.js

src/main.js

api 接口

主要用到兩個接口，一個是 api/oauth/token 登錄獲取 token 接口，一個獲取列表 api/user/list。

第一個接口是用到 laravel oauth，第二個接口直接是一個簡單的查詢用戶列表接口，詳細講會在下一篇文章中講述。

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

利用vue如何實現將時間戳轉換成自定義時間格式

利用vue和element-ui如何實現表格內容分頁

詳細講解FastClick源碼（詳細教程）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com