【Vue 快速入門】從零開始搭建 VUE + Element UI后臺管理系統(tǒng)框架

?

前言

后臺管理系統(tǒng)前端框架，現(xiàn)在很流行的形式都是，上方和左側(cè)都是導(dǎo)航菜單，中間是具體的內(nèi)容。比如阿里云、七牛云、頭條號、百家號等等，他們的管理系統(tǒng)都是這樣的。

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

?

生成項(xiàng)目

用Vue腳手架初始化一個基于 webpack 模板的新項(xiàng)目

vue init webpack testadmin

?

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

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

npm install

?

如果覺得半天沒有反應(yīng)，是因?yàn)?npm?要安裝的包都是國外服務(wù)器上的，把npm資源鏡像改到淘寶鏡像即可。

?

npm 鏡像地址配置

1、得到原本的鏡像地址

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

?

2、設(shè)成淘寶的

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， 這時候運(yùn)行npm run dev即可看到初始化后的項(xiàng)目了。

npm run dev

?

項(xiàng)目目錄結(jié)構(gòu)預(yù)覽，以及package.json解析。

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

?

VUE + Element UI

安裝并引入

同樣我們在項(xiàng)目的根目錄安裝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文件夾(作為所有業(yè)務(wù)頁面目錄)，然后在page下面新建layout.vue（作為框架結(jié)構(gòu)文件）。

然后在layout.vue用運(yùn)用Element UI Container 布局容器組件。

Container，用于布局的容器組件，方便快速搭建頁面的基本結(jié)構(gòu)：

<el-container>：外層容器。當(dāng)子元素中包含?<el-header>?或?<el-footer>?時，全部子元素會垂直上下排列，否則會水平左右排列。

<el-header>：頂欄容器。
<el-aside>：側(cè)邊欄容器。
<el-main>：主要區(qū)域容器。

然后修改路由/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}] })

?

啟動服務(wù)（npm run dev）預(yù)覽（如果之前已經(jīng)啟動，就不用了，集成了webpack支持熱更新）。

NavMenu 導(dǎo)航菜單 組件

直接復(fù)制下圖里面的代碼，到layout.vue，<el-header>、<el-aside>位置，然后微調(diào)樣式即可。

預(yù)覽：

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

修改/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-menu-item class="fr" index="3">消息中心</el-menu-item>) .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 Router 嵌套路由

接下來，<el-main>肯定是所有其它頁面的展示區(qū)域，這里涉及到一個知識點(diǎn)：Vue 嵌套路由。

舉例：當(dāng)前我們的路由是localhost:8080，打開的是layout.vue文件，如果路由改成localhost:8080/main，需要打開main.vue的內(nèi)容，如果路由改成localhost:8080/user，需要打開user.vue的內(nèi)容...怎么實(shí)現(xiàn)這個功能了？

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

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

main.vue

<template><div id="main"><h2>我這里是首頁</h2><router-link to="/user">前往用戶中心</router-link></div> </template><script> export default {name: 'main' } </script>

?

user.vue

<template><div id="user"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item><el-breadcrumb-item>用戶中心</el-breadcrumb-item></el-breadcrumb><h2>用戶中心</h2></div> </template><script> export default {name: 'User' } </script>

?

然后重點(diǎn)來了，嵌套路由。

修改/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: [{// 這里不設(shè)置值，是把main作為默認(rèn)頁面path: '/', name: 'Main',component: Main},{path: '/user',name: 'User',component: User}]}] })

?

同時在'/src/page/layout.vue'里面的<el-main>里面添加<router-view/>:

... <el-main><router-view/></el-main> ...

?

效果預(yù)覽：

?

推薦一些開源的基于 Vue 的項(xiàng)目

?

1、Sing App Vue Dashboard (?github:??https://github.com/flatlogic/sing-app-vue-dashboard?)

這是基于最新 Vue 和 Bootstrap 免費(fèi)和開源的管理模板，其實(shí)跟咱們國內(nèi)的 vue-admin-template 差不多。咱們不一定要使用它，但可以研究學(xué)習(xí)源碼，相信可以學(xué)到很多實(shí)用的技巧，

2、vue-compnay-template （github: https://gitee.com/Wjhsmart/vue-compnay-template）

vue實(shí)現(xiàn)的通用企業(yè)官網(wǎng)模板，整合了jquery，bootstarp，iview，可快速體驗(yàn)地址：http://tessai.cn?

總結(jié)

以上是生活随笔為你收集整理的【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。