vue-element-admin開發(fā)教程(v4.0.0之前)
說實(shí)話都是逼出來的，對(duì)于前端沒干過ES6都不會(huì)的人，vue視頻也就看了基礎(chǔ)的一些
但沒辦法，接下來做微服務(wù)架構(gòu)，前端就用 vue，這塊你負(fù)責(zé)。。。。說多了都是淚，腳手架框架布了都沒看過
干就完事，不過好在做好了，這里寫下給和我一樣苦逼的同學(xué)能快點(diǎn)適應(yīng)入門下，當(dāng)然一些基礎(chǔ)的東西還是要知道的
v4.0.0 版本的調(diào)整后講解：Vue 新手學(xué)習(xí)筆記：vue-element-admin 之 入門開發(fā)教程（v4.0.0 之后）
主要分為幾個(gè)部分
- 安裝
- 準(zhǔn)備工作
- mock 假數(shù)據(jù)頁面
- axios 連接后臺(tái)真數(shù)據(jù)
- 正式環(huán)境部署
- 前端完整代碼
肯定有地方不太對(duì)的，麻煩大家指出來
安裝
前端我推薦用 vscode 就是好用
安裝node.js及npm
下載node，安裝很簡(jiǎn)單一直下一步就可以了。
win+R 輸入cmd進(jìn)入命令行 輸入
node -v npm -v
出現(xiàn)以上信息說明node.js及npm安裝成功
下載 vue-element-admin，并啟動(dòng)
官方：https://github.com/PanJiaChen/vue-element-admin
框架里的組件樣式可以從 element 上找
element：http://element-cn.eleme.io/#/zh-CN/component/table
可以直接下載壓縮包解壓，也可以通過 git 下載
# 克隆項(xiàng)目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 安裝依賴 npm install #設(shè)置淘寶倉庫 npm install --registry=https://registry.npm.taobao.org # 啟動(dòng)服務(wù) npm run dev
├── build // 構(gòu)建相關(guān) ├── config // 配置相關(guān) ├── src // 源代碼 │ ├── api // 所有請(qǐng)求 │ ├── assets // 主題 字體等靜態(tài)資源 │ ├── components // 全局公用組件 │ ├── directive // 全局指令 │ ├── filtres // 全局 filter │ ├── icons // 項(xiàng)目所有 svg icons │ ├── lang // 國際化 language │ ├── mock // 項(xiàng)目mock 模擬數(shù)據(jù) │ ├── router // 路由 │ ├── store // 全局 store管理 │ ├── styles // 全局樣式 │ ├── utils // 全局公用方法 │ ├── vendor // 公用vendor │ ├── views // view │ ├── App.vue // 入口頁面 │ ├── main.js // 入口 加載組件 初始化等 │ └── permission.js // 權(quán)限管理 ├── static // 第三方不打包資源 │ └── Tinymce // 富文本 ├── .babelrc // babel-loader 配置 ├── eslintrc.js // eslint 配置項(xiàng) ├── .gitignore // git 忽略項(xiàng) ├── favicon.ico // favicon圖標(biāo) ├── index.html // html模板 └── package.json // package.json
準(zhǔn)備工作
漢化
打開vscode后
Windows、Linux 快捷鍵是：ctrl+shift+p
macOS 快捷鍵是：command + shift + p
搜索 Configure Language，選擇下圖第一個(gè)選項(xiàng)。
將"locale":“en” 修改為 “locale”:“zh-CN” ，保存文件。
選擇左側(cè)左下方的擴(kuò)展按鈕，搜索chinese 安裝下圖的插件
安裝成功以后重啟vscode，語言就改成中文了。
推薦安裝一些好用的擴(kuò)展
Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽
Auto Rename Tag 修改HTML標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽
Beautify 代碼美化
ESLint ESLint 插件，高亮提示
File Peek 根據(jù)路徑字符串，快速定位到文件
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
JavaScript (ES6) code snippets ES6語法代碼段
Vetur Vue代碼高亮及補(bǔ)全
VS Color Picker vs顏色選擇器
Vue 2 Snippets Vue2代碼補(bǔ)全
open in browser 在瀏覽器中預(yù)覽
ESLint
剛開始很難用，瘋狂報(bào)錯(cuò)，那是因?yàn)闆]配好，配好后一些小的問題，會(huì)自動(dòng)修正，在保存的時(shí)候
文件 ? 首選項(xiàng) ? 設(shè)置 ? 搜索 ESLint ? 點(diǎn)擊在 setting.json 中編輯 ? 粘進(jìn)去，保存，完事
{
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true
}dev.env.js
先來看下 config 文件夾下的 dev.env.js
這個(gè)文件夾里的 BASE_API 后臺(tái)接口的就是公共路徑，調(diào)后臺(tái)的時(shí)候要記得改，這是本地的，剩下的 prod 和 sit 分別是正式環(huán)境打包和 測(cè)試環(huán)境打包的
/src/router/index.js
先來看下目錄
詳細(xì)的解釋在這個(gè)目錄文件的上面有，每個(gè)屬性什么意思，可以在上面看
mock 假數(shù)據(jù)頁面
mock 主要是幫助前后分離的項(xiàng)目為前端提供數(shù)據(jù)，這樣才好測(cè)試
先來畫個(gè)頁面，一個(gè)分頁列表吧，路徑 /src/service/dataLog.vue 用來顯示一些信息
我在 element 組件里找了一個(gè)列表功能和分頁功能
/src/service/dataLog.vue
dataLog.vue 的 template 部分
<template>
<div class="app-container">
<!-- 查詢框 雙向綁定 keyword-->
<el-input
v-model="keyword"
placeholder="請(qǐng)輸入關(guān)鍵字"
clearable
style="width:500px" />
<!-- 搜索按鈕 綁定點(diǎn)擊事件 -->
<el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
<!-- data就是綁定數(shù)據(jù)用的 -->
<el-table
:data="dataLog"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="錯(cuò)誤信息">
<span>{{ props.row.log }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="服務(wù)單"
prop="data"/>
<el-table-column
label="時(shí)間"
prop="time"/>
</el-table>
<!-- 分頁 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getDataLog" />
<!-- total總條數(shù)
listQuery.page 當(dāng)前頁
listQuery.limit 每頁幾條
getDataLog 后買點(diǎn)擊分頁時(shí)候要回調(diào)的函數(shù) -->
</div>
</template>注意 template 下只能有一個(gè)節(jié)點(diǎn)，兩個(gè)就報(bào)錯(cuò)了，可以試下，所有我放在一個(gè)統(tǒng)一的 div 里
至于這些值為啥這樣寫，我只能說照著人家給的模板改就好，人家寫啥你寫啥，樣式啥的人家上面都有
樣式部分就不貼了，最后會(huì)把完整的代碼貼出來，來看下 js 的部分
這里解釋下分頁，分頁除了初始化給了第 1 頁和每頁 10 條后，之后每次點(diǎn)擊頁碼，數(shù)據(jù)都會(huì)雙向綁定到值上，所有在調(diào)后臺(tái)函數(shù)的時(shí)候，直接取 page 和 limit 值就行了，不想要再去想我怎么去拿 div 上面的數(shù)字
<script>
// 這里要調(diào)用我使用的 api
// 括號(hào)里的是要使用的函數(shù)接口，多個(gè)的話逗號(hào)隔開
import { getDataLog } from '@/api/service/dataLog'
// 引入分頁組件
import Pagination from '@/components/Pagination'
export default {
// 這里需要把分頁組件注冊(cè)進(jìn)來
components: { Pagination },
data() {
return {
// 搜索關(guān)鍵字
keyword: '',
// 數(shù)據(jù)條數(shù)
total: 0,
// 分頁參數(shù)
listQuery: {
page: 1,
limit: 10
},
// 列表數(shù)據(jù)
dataLog: []
}
},
// 這個(gè)是生命周期函數(shù)，這個(gè)時(shí)候是 data 和 methods 都初始化好了，具體看基礎(chǔ)知識(shí)
created() {
this.getDataLog()
},
methods: {
// 函數(shù)部分
getDataLog() {
// 參數(shù)
this.listQuery = {
page: this.listQuery.page,
limit: this.listQuery.limit,
object: this.keyword
}
// 調(diào)用上面引入的 api 里的 getDataLog
// 不引入就報(bào)函數(shù)未定義了，剛開始一個(gè)人折騰好久，老子明明定義在這了，為啥還沒定義
getDataLog(this.listQuery).then(response => {
// 返回值處理
this.dataLog = []
this.total = response.data.total
this.dataLog = response.data.items
// 查詢后要把關(guān)鍵字給清空
this.keyword = ''
})
}
}
}
</script>接下來看看上面的 api 接口
/src/api/service/dataLog.js
每次點(diǎn)擊就會(huì)去調(diào)用 api 接口里的方法，參數(shù)都看得懂
上面引用的 request 文件使得每次調(diào)用的時(shí)候都會(huì)對(duì)請(qǐng)求進(jìn)行攔截，上面的 BASE_API 就會(huì)在里面被拼上去
import request from '@/utils/request'
// 獲取錯(cuò)誤信息列表
export function getDataLog(query) {
return request({
url: '/log/getDataLog',
method: 'get',
params: query
})
}/src/mock/service/dataLog.js
接下來就是使用 mock 假數(shù)據(jù)，我就循環(huán)了10條，因?yàn)榧俚姆猪?，特意去?shí)現(xiàn)太費(fèi)勁了
如果有多個(gè)接口的數(shù)據(jù)要返回，可以在 export default 里寫多個(gè)接口去返回
import Mock from 'mockjs'
const List = []
const count = 10
// 模擬錯(cuò)誤信息
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
data: '12987122',
time: '好滋好味雞蛋仔',
log: '江浙小吃、小吃零食江浙小吃、小吃零食'
}))
}
export default {
// 獲取錯(cuò)誤信息列表
getDataLog: () => {
return {
total: List.length,
items: List,
limit: 10
}
}
}/src/mock/index.js
上面的寫完還不行，因?yàn)橥ㄟ^ api 提交的請(qǐng)求，mock 不知道哪些是需要請(qǐng)求假數(shù)據(jù)的，所有需要在 index 文件里進(jìn)行攔截
直接加就好了，就這兩行，把剛寫的假數(shù)據(jù)引用進(jìn)來，對(duì)請(qǐng)求進(jìn)行攔截
第一個(gè)參數(shù)，就是要攔截的 url 這里就和 api 掛鉤起來了
第二個(gè)參數(shù)，get 類型請(qǐng)求
第三個(gè)參數(shù)，/src/mock/service/dataLog.js 里 export 的對(duì)應(yīng)接口，這樣就和 mock 假數(shù)據(jù)也掛鉤起來了
需要攔截多少個(gè)請(qǐng)求就要寫多少個(gè)
然后 npm run dev 運(yùn)行測(cè)試就好了
axios 連接后臺(tái)真數(shù)據(jù)
這里我偷了個(gè)懶，由于 utils/request.js 已經(jīng)幫我們把 axios 都弄好了，像 BASE_API 的路徑拼接，我又不想再寫個(gè) api 文件，所以我就直接拿過來用了
先引入
import request from '@/utils/request'
js 部分：
methods: {
getDataLog() {
this.listQuery = {
page: this.listQuery.page,
limit: this.listQuery.limit,
object: this.keyword
}
// mock 請(qǐng)求假數(shù)據(jù)
// getDataLog(this.listQuery).then(response => {
// this.dataLog = []
// this.total = response.data.total
// this.dataLog = response.data.items
// // 查詢后要把關(guān)鍵字給清空
// this.keyword = ''
// })
// 請(qǐng)求后臺(tái)獲得真實(shí)數(shù)據(jù)
request({
url: '/log/getDataLog/',
method: 'post',
data: this.listQuery
}).then(response => {
this.dataLog = []
this.total = response.data.pageEntity.total
this.dataLog = response.data.retData
})
}
}這里訪問路徑就是 http://127.0.0.1:8081/log/getDataLog，如果全路徑訪問也是可以的，url 前面帶了 “/”意思就是會(huì)進(jìn)行路徑的拼接，如果寫的是 url: 'log/getDataLog' 那么訪問就報(bào)錯(cuò)了，因?yàn)榍熬Y沒拼上，還有要把 mock 里的 index.js 文件里的注掉，要不會(huì)攔截變成假數(shù)據(jù)
這里用的是 post 方法，后臺(tái)部分直接用 @RequestBody 接收參數(shù)就好了
也可以用 get 方法，把參數(shù)拼在 url 上傳遞，我這采用 restful 形式的接口，用 @PathVariable 接收參數(shù)
這時(shí)候你可能會(huì)遇到跨域問題
新建 config 包
@Configuration
public class CorssDomainConfig implements WebMvcConfigurer {
@Autowired
private CorsInterceptor corsInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
InterceptorRegistration registration = registry.addInterceptor(corsInterceptor);
registration.addPathPatterns("/**");
}
}然后新建 interceptor 包
@Component
public class CorsInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
// 添加跨域CORS
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,token, x-token");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
return true;
}
}項(xiàng)目再啟動(dòng)時(shí)，addInterceptors 就會(huì)把 preHandle 給注冊(cè)成對(duì)象，后續(xù)請(qǐng)求都會(huì)經(jīng)過 preHandle 接口對(duì)請(qǐng)求做出處理
正式環(huán)境部署
我這前端采用 Nginx 作為前端的運(yùn)行容器
詳細(xì)部署：Docker 上部署 Nginx
我 Nginx html 文件夾下我保留了 dist目錄
所以 /conf.d/default.conf 要改下
vue 里 config/sit.env.js，這里我配置了測(cè)試服的，然后在 prod.env.js 配置了正式服的
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"sit"',
// 項(xiàng)目訪問根路徑
// 測(cè)試服
BASE_API: '"http://xx.xx.xxx.xxx:xxxx"',
}#測(cè)試服打包 npm run build:sit #正式服打包 npm run build:prod
命令就在 package.json 里
打包后會(huì)在根目錄生成 dist 文件夾，把文件夾放到服務(wù)器的 html 文件夾下就好了，然后啟動(dòng) Nginx，啟動(dòng)過就不用啟動(dòng)了，由于我 Nginx 直接配置了 80 端口的，所以直接服務(wù)器路徑訪問就行了
PS:如果遇到了打包報(bào)錯(cuò)的情況，那就把 npm 更新下 npm install ，這會(huì)在項(xiàng)目根目錄生成 node_modules 文件夾，這些是需要的依賴，在 linux 上打包我這試了不行，依賴更新了也不對(duì)，不知道問題出在哪，應(yīng)該是 windows 和 linux 依賴不太一樣吧
前端完整代碼
/src/views/service/dataLog.vue
<template>
<div class="app-container">
<!-- 查詢框 雙向綁定 keyword-->
<el-input
v-model="keyword"
placeholder="請(qǐng)輸入關(guān)鍵字"
clearable
style="width:500px" />
<!-- 搜索按鈕 -->
<el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
<!-- data就是綁定數(shù)據(jù)用的 -->
<el-table
:data="dataLog"
height="600"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="錯(cuò)誤信息">
<div v-html="props.row.log"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="服務(wù)單"
prop="data"/>
<el-table-column
label="時(shí)間"
prop="time"/>
</el-table>
<!-- 分頁 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getDataLog" />
<!-- total總條數(shù)
listQuery.page 當(dāng)前頁
listQuery.limit 每頁幾條
getDataLog 后買點(diǎn)擊分頁時(shí)候要回調(diào)的函數(shù) -->
</div>
</template>
<script>
// import { getDataLog } from '@/api/service/dataLog'
import Pagination from '@/components/Pagination'
import request from '@/utils/request'
export default {
components: { Pagination },
data() {
return {
// 搜索關(guān)鍵字
keyword: '',
// 數(shù)據(jù)條數(shù)
total: 0,
// 分頁參數(shù)
listQuery: {
page: 1,
limit: 10
},
// 列表數(shù)據(jù)
dataLog: []
}
},
created() {
this.getDataLog()
},
methods: {
getDataLog() {
this.listQuery = {
page: this.listQuery.page,
limit: this.listQuery.limit,
object: this.keyword
}
// mock 請(qǐng)求假數(shù)據(jù)
// getDataLog(this.listQuery).then(response => {
// this.dataLog = []
// this.total = response.data.total
// this.dataLog = response.data.items
// // 查詢后要把關(guān)鍵字給清空
// this.keyword = ''
// })
// 請(qǐng)求后臺(tái)獲得真實(shí)數(shù)據(jù)
request({
url: '/log/getDataLog/',
method: 'post',
data: this.listQuery
}).then(response => {
this.dataLog = []
this.total = response.data.pageEntity.total
this.dataLog = response.data.retData
})
}
}
}
</script>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>/src/api/service/dataLog.js
import request from '@/utils/request'
// 獲取錯(cuò)誤信息列表
export function getDataLog(query) {
return request({
url: '/log/getDataLog',
method: 'get',
params: query
})
}/src/mock/service/index.js
攔截原因，請(qǐng)求后臺(tái)就注掉
// Mock.mock(/\/log\/getDataLog/, 'get', dataLogAPI.getDataLog)
/src/mock/service/dataLog.js
import Mock from 'mockjs'
const List = []
const count = 10
// 模擬錯(cuò)誤信息
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
data: '12987122',
time: '好滋好味雞蛋仔',
log: '江浙小吃、小吃零食江浙小吃、小吃零食'
}))
}
export default {
// 獲取錯(cuò)誤信息列表
getDataLog: () => {
return {
total: List.length,
items: List,
limit: 10
}
}
}參考：
https://blog.csdn.net/brucelpt/article/details/82994332
到此這篇關(guān)于vue-element-admin開發(fā)教程(v4.0.0之前)的文章就介紹到這了,更多相關(guān)vue-element-admin開發(fā)教程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue仿ios列表左劃刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了 解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值,需要的朋友可以參考下2019-07-07
Vue3實(shí)現(xiàn)計(jì)算屬性的代碼詳解
計(jì)算屬性對(duì)于前端開發(fā)來說算是經(jīng)常使用的一個(gè)能力了,本文將從代碼層面來給大家介紹下Vue3是如何實(shí)現(xiàn)計(jì)算屬性的,需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了基于vue的tab-list類目切換商品列表組件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家介紹了vue虛擬滾動(dòng)性能優(yōu)化方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
很多時(shí)候使用vue開發(fā)的項(xiàng)目,由于無法在低版本瀏覽器上運(yùn)行,所以需要解決下,下面這篇文章主要給大家介紹了關(guān)于vue對(duì)于低版本瀏覽器兼容問題的解決思路,需要的朋友可以參考下2023-02-02
vue開發(fā)runtime core中的虛擬節(jié)點(diǎn)示例詳解
這篇文章主要為大家介紹了vue開發(fā)runtime core中的虛擬節(jié)點(diǎn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
今天小編就為大家分享一篇Vue 監(jiān)聽列表item渲染事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue @input和@click的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10