第九篇：複習Vue腳手架（含班級管理系統頁面案例）

張簫劍發表於2024-03-01

Vue

一、前端工程化

前端工程化：指的是在企業級的前端專案開發中，把前端開發所需的工具，技術，流程，經驗等進行規範化，標準化。

模組化（JS,CSS）
元件化（UI結構，樣式，行為）
規範化（目錄結構，編碼，介面）
自動化（構建，部署，測試）

1. 環境準備

1.1 Vue-cli

Vue-cli是Vue官方提供的一個腳手架，用於快速生成一個Vue的專案模板。
Vue-cli提供瞭如下功能：

統一的目錄結構
本地除錯
熱部署
單元測試
整合打包上線

依賴環境：NodeJS
NodeJS官方下載地址：https://nodejs.org/en
安裝部署詳情可看（超詳細）：https://blog.csdn.net/WHF__/article/details/129362462

2. Vue專案簡介

2.1 Vue專案-建立

命令列：vue create vue-project01
圖形化介面：vue ui

首先建立一個資料夾
在這裡插入圖片描述
在這個框內輸入cmd

開啟圖形化介面之後，便可以開始建立Vue專案

2.2 Vue目錄結構

建立完成之後，在VsCode中開啟
基於Vue腳手架建立出來的工程，有標準的目錄結構，如下：
在這裡插入圖片描述

其中五個需要介紹：

node_modules ：整個專案的依賴包
public：存放著靜態檔案
src 存放專案的原始碼
- assets：靜態資源
- components：可重複用的元件
- router：路由配置
- views：檢視元件（頁面）
- App.vue（頁面入口-根元件）
- main.js（入口-JS檔案）
package.json：模組基本資訊，專案開發所需的模組，版本資訊
vue.config.js：儲存vue配置的檔案，如：代理，埠的配置

2.3 Vue專案-啟動

第一種方法，在視覺化工具中，點選在NPM指令碼中的server右邊的執行即可：
在這裡插入圖片描述
第二種方法，在命令列內輸入npm run serve

2.4 Vue專案-配置埠

因為預設的埠號8080很容易被佔用或者重複，所以需要手動的修改一下埠號

在vue.config.js中，新增一條配置即可：

2.5 Vue專案-頁面入口

預設首頁的HTML在 index.html中
在這裡插入圖片描述
專案入口檔案在 main.js中
‘其中.$mount("#app")掛載的區域指的就是index.html中的app區域

2.6 Vue-元件檔案

Vue的元件檔案以.vue結尾，每個元件由三部分組成:
<template>,<script><style>.

<template>是模組部分，可定義原生的HTML程式碼的
<script>控制模板資料來源和行為‘
<style>控制css樣式

二、Vue元件庫Element

1. 什麼是Element

element 是基於 vue 實現的一套不依賴業務的 UI 元件庫，提供了豐富的PC端元件，減少使用者對常用元件的封裝，降低了開發的難易程度。Element-Ui是基於vue封裝的元件庫,簡化了常用元件的封裝,提高了重用性原則,提高了重用性原則;
元件：組成網頁的部分，例如：超連結，按鈕，圖片，表格，表單，分頁等等…
官網跳轉：https://element-plus.org/zh-CN/#/zh-CN

左邊是原始HTML程式碼生成的按鈕和表單，右邊則是使用Element生成的效果，這就是為什麼要使用Element元件的原因
在這裡插入圖片描述

2. 快速入門

安裝ElementUI元件庫

在當前工程目錄下，在命令列執行指令：

npm install element-ui@2.15.3

引入ElementUI元件庫

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'

在這裡插入圖片描述

訪問官網，複製元件程式碼，進行調整

如果想要使用那個Vue頁面
在app.vue中呼叫例如：

import ElementView from './views/element/ElementView.vue';
export default {
	  components:{ 
	        ElementView
	  },
	  data(){
	    return{
	
		}
	  },
	
	  methods: {
	  
	  },
}

3. 常見元件

3.1 table 表格

Table 表格：用於展示多條結構類似的資料，可對資料進行排序，篩選，對比和其他自定義操作
例如：

3.2 pagination 分頁

pagination 分頁：分頁就是用請求從後臺把所有的資料拿下來，然後進行分頁，如果當資料足夠大時，網頁就會載入的很慢，唯一的好處就是隻需要向後臺請求一次就可以了。

3.3 dialog 對話方塊

dialog 對話方塊：對話方塊（又稱對話方塊）是一種特殊的視窗, 用來在使用者介面中向使用者顯示資訊，或者在需要的時候獲得使用者的輸入響應。

3.4 form 表單

form 表單：表單在網頁中主要負責資料採集功能。一個表單有三個基本組成部分：表單標籤：這裡麵包含了處理表單資料所用CGI程式的URL以及資料提交到伺服器的方法。表單域：包含了文字框、密碼框、隱藏域、多行文字框、核取方塊、單選框、下拉選擇框和檔案上傳框等。表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；

以上元件舉一個簡單例子如下：

<template>
  <div>
    <el-row>
      <!-- 按鈕的使用 -->
      <el-button>預設按鈕</el-button>
      <el-button type="primary"> 主要按鈕 </el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">資訊按鈕</el-button>
      <el-button type="waring">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>
    <!-- el-table :data="要展示的是什麼資料" 控制表格 -->
    <!-- prop 物件裡面的什麼屬性 -->
    <template>
      <!-- 表格表單的使用 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </template>

    <template>
      <!-- 分頁的使用 -->
      <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="1000"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination><br><br>
    </template>

    <!-- 外層點選按鈕 -->
    <el-button type="primary" @click="dialogTableVisible = true">開啟巢狀表格的 Dialog</el-button>
    <!-- 點選後進入內層對話窗 -->
    <el-dialog title="收貨地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog><br><br>

    <!-- 對話方塊——form表單  -->
    <el-button type="primary" @click="dialogFormVisible = true">開啟巢狀Form的 Dialog</el-button>
    <el-dialog title="Form表單" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活動名稱">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="活動區域">
        <el-select v-model="form.region" placeholder="請選擇活動區域">
          <el-option label="區域一" value="shanghai"></el-option>
          <el-option label="區域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="活動時間">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即建立</el-button>
        <el-button>取消</el-button>
      </el-form-item>
</el-form>

       
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
        },
      //  對話方塊裡的資料
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 表格裡的資料
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
        }, {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1517 弄",
        }, {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1519 弄",
        }, {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每頁記錄變化" + val)
    },
    handleCurrentChange: function (val) {
      alert("頁碼發生變化" + val)
    },
    onSubmit() {
        alert(JSON.stringify(this.form));
      }
  },

};
</script>

詳細效果如下：
在這裡插入圖片描述
切換頁面效果如下：

表單效果如下：

三、Vue路由

前端路由：URL中的hash（#號）與元件之間的對應關係

1. Vue Router

Vue Router是Vue的官方路由
組成：

Vue Router：路由器類，根據路由請求在路由檢視中國動態渲染選中的元件
<roter-link>：請求連結元件，瀏覽器會解析成<a>
<royter-view>：動態檢視元件，用來渲染展示與路由路徑對應的元件

三者之間的關聯如圖所示：
在這裡插入圖片描述

2. 安裝

建立Vue專案時可以勾選
npm install vue-router$3.5.1

3. 定義路由

在router下index.js內定義：
在這裡插入圖片描述
當/後面符合某種url，便會展示處對應的頁面：

四、案例

4. 案例

根據頁面原型，完成班級學生系統管理頁面開發，並透過Axios完成資料非同步載入：

1. 建立頁面
1. 佈局各個部分的元件實現
1. 列表資料的非同步載入，並渲染展示

詳細程式碼如下展示：

<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size : 40px;background-color: rgb(238, 241, 246)">大資料二班學生管理系統</el-header>
            <el-container>
                <el-aside width="200px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>導航一</template>
                            <el-menu-item-group>
                                <template slot="title">基本資訊管理</template>
                                <el-menu-item index="1-1">
                                    教師基本資訊
                                </el-menu-item>
                                <el-menu-item index="1-2">
                                   學生基本資訊
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>


                <el-main>
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="性別">
                            <el-select v-model="searchForm.gender" placeholder="性別">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="入學日期">
                            <el-date-picker v-model="searchForm.staTime" type="daterange" range-separator="至"
                                start-placeholder="開始日期" end-placeholder="結束日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查詢</el-button>
                        </el-form-item>
                    </el-form>


                    <el-table :data="tableData" border>
                        <el-table-column prop="id" label="id" width="120">
                        </el-table-column>
                        <el-table-column prop="stuId" label="學號" width="120">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="120">
                        </el-table-column>
                        <el-table-column label="性別" width="120">
                            <template slot-scope="scope">
                                {{scope.row.gender == 1 ?'男':'女'}}
                                    
                                
                            </template>
                        </el-table-column>
                        <el-table-column prop="phone" label="手機號" width="130">
                        </el-table-column>
                        <el-table-column prop="addres" label="住址" width="120">
                        </el-table-column>
                        <el-table-column prop="staTime" label="入學時間" width="140">
                        </el-table-column>
                        <el-table-column prop="operate" label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="primary" size="small">編輯</el-button>
                                <el-button type="danger" size="small">刪除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>

                    <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="1000"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination><br><br>


                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: [],
            searchForm: {
                name: '',
                gender: '',
                staTime: []
            }
        }
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange: function (val) {
            alert("每頁記錄變化" + val)
        },
        handleCurrentChange: function (val) {
            alert("頁碼發生變化" + val)
        },
        onSubmit() {
            alert("查詢結果")
        },

    },
    mounted() {
        axios.get("https://yapi.pro/mock/166153/user/id").then((result) => {
            this.tableData = result.data.data;
        })
    }
}
</script>

<style></style>

資料如下：
在這裡插入圖片描述
執行效果如下：

五、打包部署

1. 打包

點選下面第二個build右邊的三角即可：
在這裡插入圖片描述
然後會在目錄中，出現一個dist目錄，在右鍵然後磁碟中開啟

這就是打包後的檔案：
在這裡插入圖片描述

2. 部署

2.1 Nginx

Nginx是一一款輕量級的Web伺服器/反向代理伺服器及電子郵件（IMAP/POP3）代理伺服器。特點是佔有記憶體少，併發能力強，在各大型網際網路公司都有非常廣泛的應用。
官網：https://nginx.org/

直接在官網下載到一個沒有中文，不含空格的資料夾下
在這裡插入圖片描述

2.2 部署

將打包好的dist目錄下的檔案，複製到nginx安裝目錄的html目錄下
直接Ctrl C + Ctrl V 貼上就行

然後執行nginx.exe可執行檔案，會報錯，在logs內檢視，因為nginx預設埠號為80，埠號會被佔用，所以需要手動的修改一下埠號

2.3 修改埠號

在conf檔案下尋找nginx.conf配置檔案，雙擊點開就行，然後尋找36行的預設埠號80的配置
把它改成90：
在這裡插入圖片描述

然後開啟瀏覽器，訪問localhost:90就可以在瀏覽器正常訪問到

六、小結

寫本文主要是為了分享我的學習過程，也是給自己記個筆記，哪裡忘記了，回來再看一眼，也可以很快的回想起來

vue-cli多頁面腳手架
2018-04-25
Vue
vue - Vue腳手架/TodoList案例
2022-05-06
Vue
基於vue-cli重構多頁面腳手架
2018-01-23
Vue
Vue多頁應用腳手架
2019-03-03
Vue
基於vue-cli的多頁面應用腳手架
2018-03-06
Vue
vue - Vue腳手架
2022-05-05
Vue
vue腳手架
2018-09-28
Vue
開箱即用的多頁面webpack腳手架
2019-03-04
Web
VUE學習之腳手架（vue-cli）
2019-01-21
Vue
分享一個高效能靈活的多頁面Vue腳手架
2018-10-25
Vue
vue腳手架工具
2018-07-20
Vue
webpack4多頁面打包腳手架配置
2018-11-28
Web
Vue學習筆記（一）------腳手架vue cli
2019-04-17
Vue筆記
React多頁面應用腳手架-v1.3.0
2018-12-10
React
vue腳手架基礎
2020-11-21
Vue
vue腳手架多頁自動化生成實踐
2023-02-28
Vue
如何用vue搭建腳手架
2020-12-08
Vue
Vue-cli 腳手架搭建
2018-01-26
Vue
vue - Vue腳手架（終結篇）/ vue動畫
2022-05-08
Vue動畫
【 Vue 】 Vue 使用腳手架建立專案
2020-11-28
Vue
vue.js搭建使用者管理系統練手（二）----頁面框架搭建
2018-07-05
Vue.js框架
一個簡單易用的webpack4多頁面腳手架配置加學習
2018-04-13
Web
vue-cli 腳手架詳解
2019-03-04
Vue
webpack4配置vue腳手架
2019-04-14
WebVue
簡單vue專案腳手架
2019-02-16
Vue
使用腳手架搭建VUE專案
2018-08-07
Vue
vue-koa 應用腳手架
2018-06-22
Vue
Vue2.0搭建腳手架流程
2018-04-30
Vue
複雜頁面架構
2018-11-22
架構
搭建Vue2.0腳手架（vue-cli）
2018-05-21
Vue
你要的移動端vue多頁面腳手架，都幫你整合和封裝好了
2019-04-01
Vue封裝
基於vuejs2+webpack2+vuxui2多頁面架手腳，支援二級目錄
2017-04-09
VueJSWebUXUI
vue實踐01之vue-cli腳手架
2018-04-03
Vue
Vue2.0 + ElementUI 手寫許可權管理系統後臺模板（三）——頁面搭建
2018-12-16
VueUI
Vue+webpack搭建自己的腳手架
2019-03-24
VueWeb
兩步建立vue-cli腳手架
2019-08-21
Vue
Vue 框架-10-搭建腳手架 CLI
2018-11-15
Vue框架
Vue腳手架介紹與基本用法
2020-10-29
Vue