H5大咖分享：使用Vue搭建中后臺框架流程

發布時間：

2020-08-31
版權所有：

云和教育
分享：

后臺框架搭建過程

1.1創建一個Vue項目

vue create?項目名

1.1.1選擇合適的選項進行安裝

·?default

·?Manually select features

等待一段時間，項目創建完成

1.2.刪除原有的demo

1.2.1src/views

·?about.vue

· home.vue

1.2.2 App.vue

?刪除對應的nav和style樣式

<div?id=”nav”>

<router-link?to=”/”>Home</router-link>?|

<router-link?to=”/about”>About</router-link>

</div>

1.2.3 src/router/index.js

引入home的代碼，和相關的路由配置全部刪除

1.2.4 src/components

刪除HelloWord.vue

基于以上操作后，項目才會變成空白項目

1.3 搭建環境

1.3.1 UI框架

·?ElementUI

·?iview

·?antDesign

具體的框架選擇，可以選擇該網站作為參考

拿iview做例子

1.3.1.1 @vue/cli3/4

vue add vue-cli-plugin-viewui

直接運行，不需要在進行多余的配置

1.3.1.2 如果使用傳統方式

安裝iview

npm?i?–save?view-design

在main.js中引入iview

import?ViewUI?from?‘view-design’

import?‘view-design/dist/styles/iview.css’

Vue.use(ViewUI)

如果我們需要在一個css中對iview進行重置，則需要去創建一個css并且在main.js引入

在assets中創建css/reset.css，在main.js中引入（需要放在UI組件的css的下面）

import?‘./assets/css/reset.css’

1.3.2 axios

1.3.2.1 安裝axios

npm?i?–save?axios

# 或者

yarn add axios

1.3.2.2 創建一個新的axios實例進行配置，并作為模塊導出

在src下新建文件utils/server.js

server.js

import?axios?from?‘axios’

// 調用axios的create方法創建一個新的axios

const?instance?=?axios.create({

// 公共的請求前綴

baseURL:?‘https://some-domain.com/api/’,

// 請求超時時間

timeout:?1000,

// 設置默認的header信息

// headers: {‘a’: ‘1’}

})

// 創建axios的請求攔截器（一般設置的是401的問題）

instance.interceptors.request.use(config?=>?{

// 在發送請求之前做些什么

// 一般配置config中的headers添加token

return?config;

},?error?=>?{

// 對請求錯誤做些什么

return?Promise.reject(error);

});

instance.interceptors.response.use(response?=>?{

// 對響應數據做點什么

return?response;

},?error?=>?{

// 對響應錯誤做點什么

return?Promise.reject(error);

});

// 最后將實例導出，未來作為模塊使用

export?default?instance

1.3.3.接口配置

我們應該對接口進行統一的管理

·?GET /books?page=1&limit=10 獲取第一頁的信息

·?GET /books/:id 獲取某本書的信息

·?POST /books ?新建一本書{title: “”,ISBN: “”,author: “”,price: “”}

·?PUT /books/:id 更新書本全部內容{title: “”,ISBN: “”,author: “”,price: “”}

·?PATCH /books/:id 更新書本部分內容{title: “”,ISBN: “”,author: “”,price: “”}

·?DELETE /books/:id 刪除某本書

·?POST /login{username: ”,password: ”}

1.3.3.1. 創建文件夾api

在src下創建api文件夾，對應的統一模塊的數據應該放在api下的模塊.js中，模塊中有相應模板

src/api/books.js

// 引入axios的實例

import?axios?from?‘@/utils/server’

請求的函數最終返回的一定是一個Promise對象（axios.xxx()）

// 獲取很多圖書信息

/* {

page: 1,

limit: 10

} */

export?const?getBooks?=?params?=>?axios.get(‘/books’, {params})

// 獲取某一本書

export?const?getBook?=?id?=>?axios.get(`/books/${id}`)

// 創建一本書

export?const?postBook?=?data?=>?axios.post(‘/books’,?data)

// 更新一本書

export?const?putBook?=?(id,?data)?=>?axios.put(`/books/${id}`,?data)

export?const?patchBook?=?(id,?data)?=>?axios.patch(`/books/${id}`,?data)

// 刪除一本書

export?const?deleteBook?=?id?=>?axios.delete(`/books/${id}`)

src/api/user.js

import?axios?from?‘@/utils/server’

export?const?login?=?data?=>?axios.post(‘/login’,?data)

1.3.4? 路由配置

根據左側導航菜單進行路由的配置

·?Dashboard

·?主控臺

·?監控頁

·?工作臺

·?表單頁面

·?基礎表單

·?高級表單

·?列表頁面

·?基礎列表

·?用戶列表

·?搜索頁面

·?文章列表

·?項目列表

// 這里的相關path沒有按要求寫，只是個例子

const?routes?=?[

{

path:?‘/Dashboard’,

component: Layout,

children: [

{

path:?‘主控臺’,

}, {

path:?‘監控頁’

}, {

path:?‘工作臺’

}

]

}, {

path:?‘/表單頁面’,

component: Layout,

children: [

{

path:?‘基礎表單’

}, {

path:?‘高級表單’

}

]

}

]

src/router/Dashboard.js

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/Dashboard’,

redirect:?‘/Dashboard/主控臺’,

component: Layout,

children: [

{

path:?‘主控臺’,

component: ()?=>?import(‘組件路徑’)

}, {

path:?‘監控頁’,

component: ()?=>?import(‘組件路徑’)

}, {

path:?‘工作臺’,

component: ()?=>?import(‘組件路徑’)

}

]

}

src/router/表單頁面.js

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/表單頁面’,

redirect:?‘/表單頁面/基礎表單’,

component: Layout,

children: [

{

path:?‘基礎表單’,

component: ()?=>?import(‘組件路徑’)

}, {

path:?‘高級表單’,

component: ()?=>?import(‘組件路徑’)

}

]

}

這個時候我們就可以在router/index.js中引入對應的路由模塊

import?Dashboard?from?‘Dashboard.js’

import?表單頁面?from?‘表單頁面.js’

const?routes?=?[

Dashboard,

表單頁面

]

如果我們還有新增的菜單，我們可以繼續

1.?新建文件src/router/菜單.js

2.?在對應的文件中配置對應的路由

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/一級菜單路徑’,

redirect:?‘/一級菜單路徑/二級菜單路徑’

component: Layout,

children: [

{

path:?‘二級菜單路徑’,

component: ()?=>?import(‘組件路徑’)

}

]

}

3.?把這個對象在src/router/index.js中引入

import?Dashboard?from?‘Dashboard.js’

import?表單頁面?from?‘表單頁面.js’

import?菜單?from?‘菜單.js’

const?routes?=?[

Dashboard,

表單頁面,

菜單

]

1.3.4.1 添加路由后自動渲染菜單

該功能需要我們自己實現，在我們的菜單組件中，獲取到對應的路由配置，根據路由配置的數組遍歷得到菜單結構

先在src/router/index.js導出routes

export?const?routes?=?[

//…

]

在對應的菜單組件中，引入對應的routes

在渲染時，我們發現，缺少必要的信息，例如

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/一級菜單路徑’,

component: Layout,

meta: {

title:?“一級菜單”,

icon:?“ios-xxx”

children: [

{

path:?‘二級菜單路徑’,

component: ()?=>?import(‘組件路徑’),

meta: {

title:?“二級菜單”

}

{

path:?‘二級菜單路徑（不需要渲染到菜單）’,

component: ()?=>?import(‘組件路徑’),

meta: {

title:?“二級菜單”,

hidden:?true

}

]

}

{

“title”:?“”,

“icon”:?“”

}

這些自定義信息，我們可以添加到meta中

src/components/Sider.vue

<Menu?:theme=”theme2″?:active-name=”$route.path”>

<!– 根據頂級路由生成Submenu –>

<template?v-for=”parent in routes”>

<Submenu?:name=”parent.path”?:key=”parent.path”?v-if=”!parent.meta.hidden”>

<template?slot=”title”>

<Icon?:type=”parent.meta.icon”?/>

</template>

<!– 根據children生成MenuItem –>

<MenuItem?:key=”child.path”?:name=”parent.path + ‘/’ + child.path”?v-for=”child in parent.children”?:to=”parent.path + ‘/’ + child.path”>{{child.meta.title}}</MenuItem>

</template>

</Submenu>

</template>

</Menu>

</template>

import?{routes}?from?‘@/router’

export?default?{

data?() {

return?{

routes

}

</script>

1.3.5 路由組件創建

src/views中存放我們的路由組件，原則上，一個模塊應該分別在一個文件夾

– views

– dashboard

– 總控臺.vue

– 監控頁.vue

– 工作臺.vue

– 表單

– 普通表單.vue

– 高級表單.vue

如果是屬于路由組件中的普通組件

– components

– 路由組件名（文件夾）

– 普通組件.vue

1.3.6 vuex

vuex最好使用modules，在配置時，添加對應模塊在src/store/modules

– modules

– dashboard.js

– 表單.js

在每個js中結構都是相同的

demo.js

export?default?{

namespaced:?true,

state: {},

mutations: {},

actions: {}

getters: {},

modules: {}

}

再把模塊js放置在src/store/index.js中

index.js

import?模塊?from?‘模塊路徑’

const?store?=?new?Vuex.Store({

state: {},

mutations: {},

actions: {},

getters: {},

modules: {

模塊

}

})

如果我們要用到請求，那么在對應模塊中引入，并在action里調用

如果我們想要在vuex中使用Message、router等相關的對象

直接引入即可

import?{Message}?from?‘view-design’

import?router?from?‘@/router’

在vue中有一些東西是一樣

this.$store?===?new?Vue.Store()

this.$router?===?new?VueRouter()

文/云和數據高級H5開發工程師

H5大咖分享：使用Vue搭建中后臺框架流程

最新開班信息

課程咨詢

云和熱門培訓課程

推薦閱讀