提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

---

day01-項目介紹及初始化-登錄頁

提示：這里可以添加本文要記錄的大概內(nèi)容：

例如：隨著人工智能的不斷發(fā)展，機器學習這門技術(shù)也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎內(nèi)容。

---

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、人力資源項目介紹

1.1項目架構(gòu)和解決方案

主要模塊

解決的問題

二、拉取項目基礎代碼

1.引入庫

$ git clone  https://github.com/PanJiaChen/vue-admin-template.git  heimahr

2.升級core-js版本到3.25.5

$ npm i core-js@3.25.5
$ yarn add core-js@3.25.5

按照完整依賴

$ npm i

//啟動
npm run dev

3.項目目錄和入口文件介紹

3.1 入口文件

4.App.vue根組件解析

4.1App.vue組件

4.2layout布局

5.基礎設置settings.js和導航守衛(wèi) permission.js

settings.js導出網(wǎng)站基礎配置，包括：網(wǎng)站標題、固定header、顯示logo
permission.js(權(quán)限)，主要負責路由導航守衛(wèi)

6.Vuex的結(jié)構(gòu)

模板中的結(jié)構(gòu)

注意：人資資源項目主要針對用戶模塊user 進行改造和重寫

Vuex的設計思想

1.頁面交互狀態(tài)(折疊側(cè)邊欄-固定頭部)

2.使用全局狀態(tài)Vuex根據(jù)功能拆分成不同的模塊(modules)

const store = new Vuex.Store({modules:{app,settings,user},getters
})

3.進行狀態(tài)管理通過getters建立對于模塊中屬性的快捷訪問

const getters = {sidebar:state => state.app.sidebar,device:state => state.app.device,token:state => state.user.token,
}

7.使用模板中的Icon圖標

7.1 src/icons/svg目錄下的圖標都可以使用

7.2 圖標文件名直接設置為svg-icon組件的iconClass屬性

8.擴展-解析Icon圖標的實現(xiàn)思路

8.1引入目錄所有的svg

const req = require.context('./svg',false,/\.svg$/);
const requireAll = requireContext =>requireContext.keys().map(requireContext);
requireAll(req);

8.2全局注冊svg-icon組件

Vue.component('svg-icon',SvgIcon)

8.3 loader插件打包svg

// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('')

8.4svg-icon引用svg的鏈接

8.5擴展

8.5.1 了解：require.context(路徑，是否掃描子目錄， 正則匹配) 可以引入某個目錄下的內(nèi)容

8.5.2 了解：svg-sprite-loader打包了所有svg到一個svg標簽上，將svg名稱作為symbol標簽的id屬性

8.5.3 了解：svg-icon使用iconClass屬性引用了symbol的id

9.導入樣式資源并使用git管理

9.1刪除原有的.git文件，初始化倉庫

git init 

9.2添加到暫存區(qū)

git add .

9.3提交本地倉庫

git commit -m '初始化項目'

9.4本地倉庫配置遠程倉庫地址

git remote add origin 倉庫地址

9.5推送到遠程倉庫

git push -u origin master

10.登錄頁的結(jié)構(gòu)和表單

10.1 登錄頁的基本結(jié)構(gòu)布局(src/views/login/index.vue)

<template><div class="login-container"><div class="logo" /><div class="form"><h1>登錄</h1><el-card shadow="never" class="login-card"><!--登錄表單--><div class="form" ><h1>登錄</h1><el-card shadow="never" class="login-card"><!--登錄表單--><!-- el-form > el-form-item > el-input --><el-form ref="form" :model="loginForm" :rules="loginRules"><el-form-item prop="mobile"><el-input placeholder="請輸入手機號" v-model="loginForm.mobile" /></el-form-item><el-form-item prop="password"><el-input placeholder="請輸入密碼" v-model="loginForm.password" show-password/></el-form-item><el-form-item prop="isAgree"><el-checkbox v-model="loginForm.isAgree">用戶平臺使用協(xié)議</el-checkbox></el-form-item><el-form-item><el-button style="width:350px" type="primary" @click="login">登錄</el-button></el-form-item>
</el-form></el-card></div></div>
</template>
<script>export default{name:"Login"}
</script>
<style lang="scss">.login-container {display: flex;align-items: stretch;height: 100vh;.logo {flex: 3;background: rgba(38, 72, 176) url(../../assets/common/login_back.png)no-repeat center / cover;border-top-right-radius: 60px;display: flex;flex-direction: column;align-items: flex-end;justify-content: center;padding: 0 100px;.icon {background: url(../../assets/common/logo.png) no-repeat 70px center /contain;width: 300px;height: 50px;margin-bottom: 50px;}p {color: #fff;font-size: 18px;margin-top: 20px;width: 300px;text-align: center;}}.form {flex: 2;display: flex;flex-direction: column;justify-content: center;padding-left: 176px;.el-card {border: none;padding: 0;}h1 {padding-left: 20px;font-size: 24px;}.el-input {width: 350px;height: 44px;.el-input__inner {background: #f4f5fb;}}.el-checkbox {color:#606266;}}
}
</style>

11.登錄表單校驗

11.1定義數(shù)據(jù)和校驗規(guī)則

export default{name:'Login',data(){return{loginForm: {mobile: '',password: '',isAgree: false},loginRules: {mobile: [{required: true,message: '請輸入手機號',trigger: 'blur'}, {pattern: /^1[3-9]\d{9}$/,message: '手機號格式不正確',trigger: 'blur'}],password: [{required: true,message: '請輸入密碼',trigger: 'blur'}, {min: 6,max: 16,message: '密碼長度應該為6-16位之間',trigger: 'blur'}],// required只能檢查 null "" undefinedisAgree: [{validator: (rule, value, callback) => {// rule規(guī)則// value檢查的數(shù)據(jù) true/false// callback 函數(shù) 執(zhí)行這個函數(shù)// 成功執(zhí)行callback 失敗也執(zhí)行callback(錯誤對象 new Error(錯誤信息))value ? callback() : callback(new Error('沒有勾選用戶平臺協(xié)議'))}}]}}},methods:{login(){this.$refs.form.validate((isok)=>{if(isok){alert('校驗通過') } }) } }
}