Vue 新手學習筆記：vue-element-admin 之安裝，配置及入門開發

所屬專欄： Vue 開發學習進步

說實話都是逼出來的，對於前端沒干過ES6都不會的人，vue視頻也就看了基礎的一些
但沒辦法，接下來做微服務架構，前端就用 vue，這塊你負責。。。。說多了都是淚，腳手架框架布了都沒看過
干就完事，不過好在做好了，這里寫下給和我一樣苦逼的同學能快點適應入門下，當然一些基礎的東西還是要知道的

主要分為幾個部分

• 安裝

• 准備工作

• mock 假數據頁面

• axios 連接后台真數據

• 正式環境部署

• 前端完整代碼

肯定有地方不太對的，麻煩大家指出來

安裝

前端我推薦用 vscode 就是好用

vscode官網

安裝node.js及npm

npm官網地址

下載node，安裝很簡單一直下一步就可以了。

win+R 輸入cmd進入命令行 輸入

1.  
   node -v
2.  
   npm -v

 

 

出現以上信息說明node.js及npm安裝成功

下載 vue-element-admin，並啟動

官方：https://github.com/PanJiaChen/vue-element-admin

框架里的組件樣式可以從 element 上找 

element：http://element-cn.eleme.io/#/zh-CN/component/table

可以直接下載壓縮包解壓，也可以通過 git 下載

1.  
   # 克隆項目
2.  
   git  clone https://github.com/PanJiaChen/vue-element-admin.git
3.  
    
4.  
   #設置淘寶倉庫
5.  
   npm install --registry=https: //registry.npm.taobao.org
6.  
    
7.  
   # 安裝依賴
8.  
   npm install
9.  
    
10.  
    # 啟動服務
11.  
    npm run dev

 

 

 

1.  
   ├── build  // 構建相關  
2.  
   ├── config  // 配置相關
3.  
   ├── src  // 源代碼
4.  
   │   ├── api  // 所有請求
5.  
   │   ├── assets  // 主題 字體等靜態資源
6.  
   │   ├── components  // 全局公用組件
7.  
   │   ├── directive  // 全局指令
8.  
   │   ├── filtres  // 全局 filter
9.  
   │   ├── icons  // 項目所有 svg icons
10.  
    │   ├── lang  // 國際化 language
11.  
    │   ├── mock  // 項目mock 模擬數據
12.  
    │   ├── router  // 路由
13.  
    │   ├── store  // 全局 store管理
14.  
    │   ├── styles  // 全局樣式
15.  
    │   ├── utils  // 全局公用方法
16.  
    │   ├── vendor  // 公用vendor
17.  
    │   ├── views  // view
18.  
    │   ├── App.vue  // 入口頁面
19.  
    │   ├── main.js  // 入口 加載組件 初始化等
20.  
    │ └── permission.js  // 權限管理
21.  
    ├──  static // 第三方不打包資源
22.  
    │   └── Tinymce  // 富文本
23.  
    ├── .babelrc  // babel-loader 配置
24.  
    ├── eslintrc.js  // eslint 配置項
25.  
    ├── .gitignore  // git 忽略項
26.  
    ├── favicon.ico  // favicon圖標
27.  
    ├── index.html  // html模板
28.  
    └──  package.json // package.json

准備工作

漢化

打開vscode后
Windows、Linux 快捷鍵是：ctrl+shift+p

macOS 快捷鍵是：command + shift + p
搜索 Configure Language，選擇下圖第一個選項。

 

 

將"locale":“en” 修改為 “locale”:“zh-CN” ，保存文件。
選擇左側左下方的擴展按鈕，搜索chinese 安裝下圖的插件

 

 

安裝成功以后重啟vscode，語言就改成中文了。

 

 

推薦安裝一些好用的擴展

Auto Close Tag 自動閉合HTML標簽
Auto Rename Tag 修改HTML標簽時，自動修改匹配的標簽
Beautify 代碼美化
ESLint ESLint 插件，高亮提示
File Peek 根據路徑字符串，快速定位到文件
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
JavaScript (ES6) code snippets ES6語法代碼段
Vetur Vue代碼高亮及補全
VS Color Picker vs顏色選擇器
Vue 2 Snippets Vue2代碼補全
open in browser 在瀏覽器中預覽

ESLint

剛開始很難用，瘋狂報錯，那是因為沒配好，配好后一些小的問題，會自動修正，在保存的時候

文件 ➡ 首選項 ➡ 設置 ➡ 搜索 ESLint ➡ 點擊在 setting.json 中編輯 ➡ 粘進去，保存，完事

1.  
   {
2.  
   "files.autoSave": "off",
3.  
   "eslint.validate": [
4.  
   "javascript",
5.  
   "javascriptreact",
6.  
   "vue-html",
7.  
   {
8.  
   "language": "vue",
9.  
   "autoFix": true
10.  
    }
11.  
    ],
12.  
    "eslint.run": "onSave",
13.  
    "eslint.autoFixOnSave": true
14.  
    }

dev.env.js

先來看下 config 文件夾下的 dev.env.js

這個文件夾里的 BASE_API 后台接口的就是公共路徑，調后台的時候要記得改，這是本地的，剩下的 prod 和 sit 分別是正式環境打包和 測試環境打包的

 

 

/src/router/index.js

先來看下目錄

 

 

詳細的解釋在這個目錄文件的上面有，每個屬性什么意思，可以在上面看

mock 假數據頁面

mock 主要是幫助前后分離的項目為前端提供數據，這樣才好測試

先來畫個頁面，一個分頁列表吧，路徑 /src/service/dataLog.vue 用來顯示一些信息

我在 element 組件里找了一個列表功能和分頁功能

/src/service/dataLog.vue

 

 

dataLog.vue 的 template 部分

1.  
   <template>
2.  
   <div class="app-container">
3.  
   <!-- 查詢框 雙向綁定 keyword-->
4.  
   <el-input
5.  
   v-model="keyword"
6.  
   placeholder="請輸入關鍵字"
7.  
   clearable
8.  
   style="width:500px" />
9.  
   <!-- 搜索按鈕 綁定點擊事件 -->
10.  
    <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
11.  
    <!-- data就是綁定數據用的 -->
12.  
    <el-table
13.  
    :data="dataLog"
14.  
    style="width: 100%">
15.  
    <el-table-column type="expand">
16.  
    <template slot-scope="props">
17.  
    <el-form label-position="left" inline class="demo-table-expand">
18.  
    <el-form-item label="錯誤信息">
19.  
    <span>{{ props.row.log }}</span>
20.  
    </el-form-item>
21.  
    </el-form>
22.  
    </template>
23.  
    </el-table-column>
24.  
    <el-table-column
25.  
    label="服務單"
26.  
    prop="data"/>
27.  
    <el-table-column
28.  
    label="時間"
29.  
    prop="time"/>
30.  
    </el-table>
31.  
    <!-- 分頁 -->
32.  
    <pagination
33.  
    v-show="total>0"
34.  
    :total="total"
35.  
    :page.sync="listQuery.page"
36.  
    :limit.sync="listQuery.limit"
37.  
    @ pagination="getDataLog" />
38.  
    <!-- total總條數
39.  
    listQuery.page 當前頁
40.  
    listQuery.limit 每頁幾條
41.  
    getDataLog 后買點擊分頁時候要回調的函數 -->
42.  
    </div>
43.  
    </template>

注意 template 下只能有一個節點，兩個就報錯了，可以試下，所有我放在一個統一的 div 里

至於這些值為啥這樣寫，我只能說照着人家給的模板改就好，人家寫啥你寫啥，樣式啥的人家上面都有

 

 

樣式部分就不貼了，最后會把完整的代碼貼出來，來看下 js 的部分

這里解釋下分頁，分頁除了初始化給了第 1 頁和每頁 10 條后，之后每次點擊頁碼，數據都會雙向綁定到值上，所有在調后台函數的時候，直接取 page 和 limit 值就行了，不想要再去想我怎么去拿 div 上面的數字

1.  
   <script>
2.  
   // 這里要調用我使用的 api
3.  
   // 括號里的是要使用的函數接口，多個的話逗號隔開
4.  
   import { getDataLog } from '@/api/service/dataLog'
5.  
   // 引入分頁組件
6.  
   import Pagination from '@/components/Pagination'
7.  
    
8.  
   export  default {
9.  
   // 這里需要把分頁組件注冊進來
10.  
    components: { Pagination },
11.  
    data() {
12.  
    return {
13.  
    // 搜索關鍵字
14.  
    keyword:  '',
15.  
    // 數據條數
16.  
    total:  0,
17.  
    // 分頁參數
18.  
    listQuery: {
19.  
    page:  1,
20.  
    limit:  10
21.  
    },
22.  
    // 列表數據
23.  
    dataLog: []
24.  
    }
25.  
    },
26.  
    // 這個是生命周期函數，這個時候是 data 和 methods 都初始化好了，具體看基礎知識
27.  
    created() {
28.  
    this.getDataLog()
29.  
    },
30.  
    methods: {
31.  
    // 函數部分
32.  
    getDataLog() {
33.  
    // 參數
34.  
    this.listQuery = {
35.  
    page:  this.listQuery.page,
36.  
    limit:  this.listQuery.limit,
37.  
    object: this.keyword
38.  
    }
39.  
    // 調用上面引入的 api 里的 getDataLog
40.  
    // 不引入就報函數未定義了，剛開始一個人折騰好久，老子明明定義在這了，為啥還沒定義
41.  
    getDataLog( this.listQuery).then(response => {
42.  
    // 返回值處理
43.  
    this.dataLog = []
44.  
    this.total = response.data.total
45.  
    this.dataLog = response.data.items
46.  
    // 查詢后要把關鍵字給清空
47.  
    this.keyword = ''
48.  
    })
49.  
    }
50.  
    }
51.  
    }
52.  
    </script>

接下來看看上面的 api 接口

/src/api/service/dataLog.js

每次點擊就會去調用 api 接口里的方法，參數都看得懂

上面引用的 request 文件使得每次調用的時候都會對請求進行攔截，上面的 BASE_API 就會在里面被拼上去

1.  
   import request from '@/utils/request'
2.  
    
3.  
   // 獲取錯誤信息列表
4.  
   export function getDataLog(query) {
5.  
   return request({
6.  
   url: '/log/getDataLog',
7.  
   method: 'get',
8.  
   params: query
9.  
   })
10.  
    }

/src/mock/service/dataLog.js

接下來就是使用 mock 假數據，我就循環了10條，因為假的分頁，特意去實現太費勁了

如果有多個接口的數據要返回，可以在 export default 里寫多個接口去返回

1.  
   import Mock from 'mockjs'
2.  
    
3.  
   const List = []
4.  
    
5.  
   const count = 10
6.  
    
7.  
   // 模擬錯誤信息
8.  
   for (let i = 0; i < count; i++) {
9.  
   List.push(Mock.mock({
10.  
    data: '12987122',
11.  
    time: '好滋好味雞蛋仔',
12.  
    log: '江浙小吃、小吃零食江浙小吃、小吃零食'
13.  
    }))
14.  
    }
15.  
     
16.  
    export default {
17.  
    // 獲取錯誤信息列表
18.  
    getDataLog:  () => {
19.  
    return {
20.  
    total: List.length,
21.  
    items: List,
22.  
    limit: 10
23.  
    }
24.  
    }
25.  
    }

/src/mock/index.js

上面的寫完還不行，因為通過 api 提交的請求，mock 不知道哪些是需要請求假數據的，所有需要在 index 文件里進行攔截

直接加就好了，就這兩行，把剛寫的假數據引用進來，對請求進行攔截

第一個參數，就是要攔截的 url 這里就和 api 掛鈎起來了

第二個參數，get 類型請求

第三個參數，/src/mock/service/dataLog.js 里 export 的對應接口，這樣就和 mock 假數據也掛鈎起來了

需要攔截多少個請求就要寫多少個

 

 

然后 npm run dev 運行測試就好了

axios 連接后台真數據

這里我偷了個懶，由於 utils/request.js 已經幫我們把 axios 都弄好了，像 BASE_API 的路徑拼接，我又不想再寫個 api 文件，所以我就直接拿過來用了

先引入

import request from '@/utils/request'

js 部分：

1.  
   methods: {
2.  
   getDataLog() {
3.  
   this.listQuery = {
4.  
   page:  this.listQuery.page,
5.  
   limit:  this.listQuery.limit,
6.  
   object: this.keyword
7.  
   }
8.  
   // mock 請求假數據
9.  
   // getDataLog(this.listQuery).then(response => {
10.  
    // this.dataLog = []
11.  
    // this.total = response.data.total
12.  
    // this.dataLog = response.data.items
13.  
    // // 查詢后要把關鍵字給清空
14.  
    // this.keyword = ''
15.  
    // })
16.  
    // 請求后台獲得真實數據
17.  
    request({
18.  
    url:  '/log/getDataLog/',
19.  
    method:  'post',
20.  
    data: this.listQuery
21.  
    }).then(response => {
22.  
    this.dataLog = []
23.  
    this.total = response.data.pageEntity.total
24.  
    this.dataLog = response.data.retData
25.  
    })
26.  
    }
27.  
    }

這里訪問路徑就是 http://127.0.0.1:8081/log/getDataLog，如果全路徑訪問也是可以的，url 前面帶了 “/”意思就是會進行路徑的拼接，如果寫的是 url: 'log/getDataLog' 那么訪問就報錯了，因為前綴沒拼上，還有要把 mock 里的 index.js 文件里的注掉，要不會攔截變成假數據

這里用的是 post 方法，后台部分直接用 @RequestBody 接收參數就好了

 

 

也可以用 get 方法，把參數拼在 url 上傳遞，我這采用 restful 形式的接口，用 @PathVariable 接收參數

 

 

這時候你可能會遇到跨域問題

新建 config 包

1.  
   @Configuration
2.  
   public class CorssDomainConfig implements WebMvcConfigurer {
3.  
    
4.  
   @Autowired
5.  
   private CorsInterceptor corsInterceptor;
6.  
    
7.  
   @Override
8.  
   public void addInterceptors(InterceptorRegistry registry) {
9.  
   InterceptorRegistration registration = registry.addInterceptor(corsInterceptor);
10.  
    registration.addPathPatterns( "/**");
11.  
    }
12.  
     
13.  
    }

然后新建 interceptor 包

1.  
   @Component
2.  
   public class CorsInterceptor extends HandlerInterceptorAdapter {
3.  
    
4.  
   @Override
5.  
   public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
6.  
   throws Exception {
7.  
   // 添加跨域CORS
8.  
   response.setHeader( "Access-Control-Allow-Origin", "*");
9.  
   response.setHeader( "Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,token, x-token");
10.  
    response.setHeader( "Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
11.  
    return true;
12.  
    }
13.  
    }

項目再啟動時，addInterceptors 就會把 preHandle 給注冊成對象，后續請求都會經過 preHandle 接口對請求做出處理

正式環境部署

我這前端采用 Nginx 作為前端的運行容器

詳細部署：Docker 上部署 Nginx

我 Nginx html 文件夾下我保留了 dist目錄

 

 

所以 /conf.d/default.conf 要改下

 

 

vue 里 config/sit.env.js，這里我配置了測試服的，然后在 prod.env.js 配置了正式服的

1.  
   module.exports = {
2.  
   NODE_ENV:  '"production"',
3.  
   ENV_CONFIG:  '"sit"',
4.  
   // 項目訪問根路徑
5.  
   // 測試服
6.  
   BASE_API:  '"http://xx.xx.xxx.xxx:xxxx"',
7.  
   }

1.  
   #測試服打包
2.  
   npm run build:sit
3.  
    
4.  
   #正式服打包
5.  
   npm run build:prod

命令就在 package.json 里

打包后會在根目錄生成 dist 文件夾，把文件夾放到服務器的 html 文件夾下就好了，然后啟動 Nginx，啟動過就不用啟動了，由於我 Nginx 直接配置了 80 端口的，所以直接服務器路徑訪問就行了

PS:如果遇到了打包報錯的情況，那就把 npm 更新下 npm install ，這會在項目根目錄生成 node_modules 文件夾，這些是需要的依賴，在 linux 上打包我這試了不行，依賴更新了也不對，不知道問題出在哪，應該是 windows 和 linux 依賴不太一樣吧

前端完整代碼

/src/views/service/dataLog.vue

1.  
   <template>
2.  
   <div class="app-container">
3.  
   <!-- 查詢框 雙向綁定 keyword-->
4.  
   <el-input
5.  
   v-model="keyword"
6.  
   placeholder="請輸入關鍵字"
7.  
   clearable
8.  
   style="width:500px" />
9.  
   <!-- 搜索按鈕 -->
10.  
    <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
11.  
    <!-- data就是綁定數據用的 -->
12.  
    <el-table
13.  
    :data="dataLog"
14.  
    height="600"
15.  
    style="width: 100%">
16.  
    <el-table-column type="expand">
17.  
    <template slot-scope="props">
18.  
    <el-form label-position="left" inline class="demo-table-expand">
19.  
    <el-form-item label="錯誤信息">
20.  
    <div v-html="props.row.log"/>
21.  
    </el-form-item>
22.  
    </el-form>
23.  
    </template>
24.  
    </el-table-column>
25.  
    <el-table-column
26.  
    label="服務單"
27.  
    prop="data"/>
28.  
    <el-table-column
29.  
    label="時間"
30.  
    prop="time"/>
31.  
    </el-table>
32.  
    <!-- 分頁 -->
33.  
    <pagination
34.  
    v-show="total>0"
35.  
    :total="total"
36.  
    :page.sync="listQuery.page"
37.  
    :limit.sync="listQuery.limit"
38.  
    @ pagination="getDataLog" />
39.  
    <!-- total總條數
40.  
    listQuery.page 當前頁
41.  
    listQuery.limit 每頁幾條
42.  
    getDataLog 后買點擊分頁時候要回調的函數 -->
43.  
    </div>
44.  
    </template>
45.  
     
46.  
    <script>
47.  
    // import { getDataLog } from '@/api/service/dataLog'
48.  
    import Pagination from '@/components/Pagination'
49.  
    import request from '@/utils/request'
50.  
     
51.  
    export default {
52.  
    components: { Pagination },
53.  
    data() {
54.  
    return {
55.  
    // 搜索關鍵字
56.  
    keyword:  '',
57.  
    // 數據條數
58.  
    total:  0,
59.  
    // 分頁參數
60.  
    listQuery: {
61.  
    page: 1,
62.  
    limit: 10
63.  
    },
64.  
    // 列表數據
65.  
    dataLog: []
66.  
    }
67.  
    },
68.  
    created() {
69.  
    this.getDataLog()
70.  
    },
71.  
    methods: {
72.  
    getDataLog() {
73.  
    this.listQuery = {
74.  
    page: this.listQuery.page,
75.  
    limit: this.listQuery.limit,
76.  
    object: this.keyword
77.  
    }
78.  
    // mock 請求假數據
79.  
    // getDataLog(this.listQuery).then(response => {
80.  
    // this.dataLog = []
81.  
    // this.total = response.data.total
82.  
    // this.dataLog = response.data.items
83.  
    // // 查詢后要把關鍵字給清空
84.  
    // this.keyword = ''
85.  
    // })
86.  
    // 請求后台獲得真實數據
87.  
    request({
88.  
    url: '/log/getDataLog/',
89.  
    method: 'post',
90.  
    data: this.listQuery
91.  
    }).then( response => {
92.  
    this.dataLog = []
93.  
    this.total = response.data.pageEntity.total
94.  
    this.dataLog = response.data.retData
95.  
    })
96.  
    }
97.  
    }
98.  
    }
99.  
    </script>
100.  
      
101.  
     <style>
102.  
     .demo-table-expand {
103.  
     font-size: 0;
104.  
     }
105.  
     .demo-table-expand label {
106.  
     width: 90px;
107.  
     color: #99a9bf;
108.  
     }
109.  
     .demo-table-expand .el-form-item {
110.  
     margin-right: 0;
111.  
     margin-bottom: 0;
112.  
     width: 50%;
113.  
     }
114.  
     </style>

/src/api/service/dataLog.js

1.  
   import request from '@/utils/request'
2.  
    
3.  
   // 獲取錯誤信息列表
4.  
   export function getDataLog(query) {
5.  
   return request({
6.  
   url: '/log/getDataLog',
7.  
   method: 'get',
8.  
   params: query
9.  
   })
10.  
    }

/src/mock/service/index.js

攔截原因，請求后台就注掉

// Mock.mock(/\/log\/getDataLog/, 'get', dataLogAPI.getDataLog)

/src/mock/service/dataLog.js

1.  
   import Mock from 'mockjs'
2.  
    
3.  
   const List = []
4.  
    
5.  
   const count = 10
6.  
    
7.  
   // 模擬錯誤信息
8.  
   for (let i = 0; i < count; i++) {
9.  
   List.push(Mock.mock({
10.  
    data: '12987122',
11.  
    time: '好滋好味雞蛋仔',
12.  
    log: '江浙小吃、小吃零食江浙小吃、小吃零食'
13.  
    }))
14.  
    }
15.  
     
16.  
    export default {
17.  
    // 獲取錯誤信息列表
18.  
    getDataLog:  () => {
19.  
    return {
20.  
    total: List.length,
21.  
    items: List,
22.  
    limit: 10
23.  
    }
24.  
    }
25.  
    }