點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

后臺管理系統前端框架，現在很流行的形式都是，上方和左側都是導航菜單，中間是具體的內容。比如阿里云、七牛云、頭條號、百家號等等，他們的管理系統都是這樣的。

從零開始搭建 VUE + Element UI后臺管理系統框架

現在我們從零開始，給小伙伴們講講如何來搭建這樣的一個前端頁面框架，主要用到 VUE + Element UI。

生成項目

用Vue腳手架初始化一個基于 webpack 模板的新項目

vue init webpack testadmin

從零開始搭建 VUE + Element UI后臺管理系統框架

一路向下，會提示你項目名稱、項目描述、作者、是否安裝vue-router(這里選擇Y，后面需要用到)、ESLint等，看自己情況選擇輸入咯。

現在他會自動幫你npm install安裝項目需要的模塊，如果你的版本沒有自動安裝的話，沒有關系，我們切換到項目目錄(如cd testadmin)。執行

npm install

如果覺得半天沒有反應，是因為 npm 要安裝的包都是國外服務器上的，把npm資源鏡像改到淘寶鏡像即可。

npm 鏡像地址配置

1、得到原本的鏡像地址

npm get registry > https://registry.npmjs.org/

2、設成淘寶的

npm config set registry http://registry.npm.taobao.org/> yarn config set registry http://registry.npm.taobao.org/

3、換成原來的

npm config set registry https://registry.npmjs.org/

ok， 這時候運行npm run dev即可看到初始化后的項目了。

npm run dev

從零開始搭建 VUE + Element UI后臺管理系統框架

項目目錄結構預覽，以及package.json解析。

從零開始搭建 VUE + Element UI后臺管理系統框架

下面我們來集成Element UI，搭建框架。

VUE + Element UI

安裝并引入

同樣我們在項目的根目錄安裝Element UI

npm i element-ui -S

然后我們打開修改/src/main.js文件，引入element-ui。

import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({ el: '#app', router, render: h => h(App)});

Container 布局組件

在src目錄下，新建page文件夾(作為所有業務頁面目錄)，然后在page下面新建layout.vue(作為框架結構文件)。

然后在layout.vue用運用Element UI Container 布局容器組件。

從零開始搭建 VUE + Element UI后臺管理系統框架

Container，用于布局的容器組件，方便快速搭建頁面的基本結構：

：外層容器。當子元素中包含 或 時，全部子元素會垂直上下排列，否則會水平左右排列。

：頂欄容器。 ：側邊欄容器。 ：主要區域容器。

從零開始搭建 VUE + Element UI后臺管理系統框架

然后修改路由/src/router/index.js文件

import Vue from 'vue'import Router from 'vue-router'import Layout from '@/page/layout'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Layout', component: Layout } ]})

啟動服務(npm run dev)預覽(如果之前已經啟動，就不用了，集成了webpack支持熱更新)。

從零開始搭建 VUE + Element UI后臺管理系統框架

NavMenu 導航菜單 組件

直接復制下圖里面的代碼，到layout.vue，、位置，然后微調樣式即可。

從零開始搭建 VUE + Element UI后臺管理系統框架

預覽：

從零開始搭建 VUE + Element UI后臺管理系統框架

但是會發現一個問題，下方有很大一部分空白區域，理論上，下方應該是沾滿的，不會有任何空白的地方，這時候我們需要修改一樣樣式，來滿足這個需求。

修改/src/page/layout.vue里面的樣式：

.el-container{ position: absolute; width: 100%; top: 0px ; left: 0 ; bottom: 0;}.el-header{ padding: 0; z-index: 1000;}// header菜單需要靠右的添加.fr即可(如：消息中心).el-header .fr{ float: right;}.el-header .el-menu{ border-bottom: none;}.el-aside, .el-main{ padding-top: 60px;}.el-aside{ background: #545c64;}.el-aside .el-menu{ border-right: none;}

然后在/src/App.vue里面添加樣式：

*{ padding: 0; margin: 0;}html,body{ width: 100%; height: 100%;}#app { height: 100%;}

從零開始搭建 VUE + Element UI后臺管理系統框架

Vue Router 嵌套路由

接下來，肯定是所有其它頁面的展示區域，這里涉及到一個知識點：Vue 嵌套路由。

舉例：當前我們的路由是localhost:8080，打開的是layout.vue文件，如果路由改成localhost:8080/main，需要打開main.vue的內容，如果路由改成localhost:8080/user，需要打開user.vue的內容…怎么實現這個功能了？

Vue 嵌套路由來幫我們解決這個問題！

我們先在page目錄下面新建2個文件main.vue、user.vue。

main.vue

我這里是首頁

前往用戶中心

user.vue

首頁用戶中心

用戶中心

然后重點來了，嵌套路由。

修改/src/router/index.js路由文件：

import Vue from 'vue'import Router from 'vue-router'import Layout from '@/page/layout'import Main from '@/page/main'import User from '@/page/user'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Layout', component: Layout, // 嵌套路由 children: [{ // 這里不設置值，是把main作為默認頁面 path: '/', name: 'Main', component: Main },{ path: '/user', name: 'User', component: User }] } ]})

同時在'/src/page/layout.vue'里面的里面添加:

......

效果預覽：

從零開始搭建 VUE + Element UI后臺管理系統框架

是不是還意猶未盡了？其實到這里已經結束了。希望能給剛剛入門或者還在學習的小伙伴帶來幫助，如果覺得文章看起來不是很好的，可以在評論取評論，看大家的評論情況，推出視頻教程。

公告

喜歡小編的點擊關注，了解更多知識！

總結

以上是生活随笔為你收集整理的vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。