Vue框架應(yīng)用實戰(zhàn)項目式教程 課件 任務(wù)8 文章數(shù)據(jù)全局管理；任務(wù)9 項目托管與發(fā)布

1文章數(shù)據(jù)全局管理任務(wù)8框架技術(shù)應(yīng)用學(xué)習(xí)目標在Vue如何中實現(xiàn)全局狀態(tài)管理呢？這就需要使用到pinia狀態(tài)管理庫了。pinia允許我們跨組件或頁面共享狀態(tài)，便于在Vue實例實現(xiàn)數(shù)據(jù)的全局共享和管理。本章節(jié)我們將學(xué)習(xí)pinia的下載安裝和具體使用。【知識目標】掌握pinia的安裝和配置；掌握pinia的使用方法?！炯寄苣繕恕磕軌蚴褂胮inia進行全局狀態(tài)管理?！舅刭|(zhì)目標】提升網(wǎng)絡(luò)安全意識。項目背景在之前的章節(jié)中我們已經(jīng)學(xué)習(xí)父子組件之間通信的方式，在項目中如何在多級嵌套的組件或同一層級的組件中共享數(shù)據(jù)，是我們常遇到的問題。本章節(jié)將重點介紹使用pinia全局狀態(tài)管理庫解決這一問題，并進行就業(yè)指導(dǎo)文章詳情頁開發(fā)。任務(wù)規(guī)劃本任務(wù)要求使用pinia庫進行就業(yè)指導(dǎo)文章詳情頁開發(fā)。任務(wù)8.1pinia的安裝與配置本任務(wù)要求下載并配置pinia狀態(tài)管理庫?！救蝿?wù)分析】完成該任務(wù)需要同學(xué)們了解并且掌握以下知識內(nèi)容pinia的下載與引入；pinia的配置和使用。任務(wù)流程如圖8-1所示。圖8-1任務(wù)流程圖任務(wù)8.1pinia的安裝與配置【任務(wù)實施】步驟一.下載并導(dǎo)入pinia。進入項目根目錄，使用npm包管理工具下載pinia。npminstallpinia--save完成pinia的安裝后，我們需要將pinia掛載到Vue實例中，也就是我們需要創(chuàng)建一個根存儲傳遞給應(yīng)用程序，簡單來說就是創(chuàng)建一個存儲數(shù)據(jù)的數(shù)據(jù)桶，放到應(yīng)用程序中去。在main.js中導(dǎo)入pinia，并完成pinia導(dǎo)入和注冊。import{createApp}from'vue'//導(dǎo)入createPinia方法import{createPinia}from'pinia'importAppfrom'./App.vue'//創(chuàng)建pinia實例constpinia=createPinia()constapp=createApp(App)//全局注冊piniaapp.use(pinia)app.mount('#app')任務(wù)8.1pinia的安裝與配置【任務(wù)實施】步驟二.配置pinia。在項目src目錄下新建store文件夾，并在該文件夾中新建index.js、state.js、actions.js文件，用于存儲pinia中各模塊內(nèi)容。文件結(jié)構(gòu)如圖8-2所示。圖8-2文件結(jié)構(gòu)任務(wù)8.1pinia的安裝與配置【任務(wù)實施】步驟二.配置pinia。在此我們需要了解幾個關(guān)于pinia的概念。Store：Store是用defineStore()函數(shù)定義的，Store是獨立存在的，它用于保存狀態(tài)和業(yè)務(wù)邏輯，而不綁定到組件樹中。一個Store可以理解為一個獨立的全局數(shù)據(jù)倉庫，它包含三個模塊，分別是state、getters和actions，它們相當(dāng)于組件中的data、computed和methods。index.js是Store的入口文件，主要用于定義和配置Store。state：state是Store的核心部分。它主要用于存儲全局數(shù)據(jù)。在以上代碼中state.js就是用于創(chuàng)建state模塊的。action：actions相當(dāng)于組件中的methods。它們可以使用defineStore()中的actions屬性定義，action用于定義業(yè)務(wù)邏輯。在以上代碼中action.js就是用于創(chuàng)建action模塊的。任務(wù)8.1pinia的安裝與配置【任務(wù)實施】在index.js中定義和配置Store，代碼如下所示：

import{defineStore}from'pinia'

importstatefrom'./state.js'

importactionsfrom'./actions'

conststore=defineStore('articles',{

state,

actions

})

exportdefaultstoredefineStore()用于定義一個Store，該函數(shù)接收兩個參數(shù)：name：一個字符串，必傳項，該Store的唯一id。options：一個對象，store的配置項，比如配置store內(nèi)的數(shù)據(jù)，修改數(shù)據(jù)的方法等等。在defineStore('articles',{state,actions})代碼中，我們?yōu)镾tore賦予了唯一id。同時將state模塊和actions模塊掛載至Store上。任務(wù)8.1pinia的安裝與配置【任務(wù)實施】步驟二.配置pinia。在state.js中定義全局數(shù)據(jù)，并導(dǎo)出。為了便于同學(xué)們調(diào)試，我們暫時定義全局數(shù)據(jù)num=0。

exportdefault()=>{

return{

num:0,

}

}在App.vue中輸入如下代碼。嘗試將定義好的store進行打印。

<scriptsetup>

//導(dǎo)入useShopStore方法

importuseShopStorefrom'./store/index.js'

conststore=useShopStore();

//打印store的唯一id

console.log(store.$id);

//打印state中的num數(shù)據(jù)

console.log(store.$state.num);

</script>任務(wù)8.1pinia的安裝與配置【任務(wù)實施】代碼運行結(jié)果如圖8-3所示。圖8-3輸出結(jié)果任務(wù)8.1pinia的安裝與配置【知識鏈接】8.1.1pinia簡介pinia是一個擁有組合式API的Vue狀態(tài)管理庫，它允許你跨組件或頁面共享狀態(tài)。pinia的標志是一個菠蘿，如圖8-4所示，官方對其的解釋是：“菠蘿實際上是一組單獨的花朵，它們結(jié)合在一起形成多個水果。與Store類似，每一個都是獨立誕生的，但最終都是相互聯(lián)系的?！眻D8-4pinia標志任務(wù)8.1pinia的安裝與配置【知識鏈接】8.1.1pinia簡介pinia的優(yōu)勢：pinia同時支持Vue2和Vue3；pinia中只有state、getter、action，拋棄了傳統(tǒng)的Mutation，這無疑減少了工作量；pinia中action支持同步和異步；良好的Typescript支持，；pinia在組合式API中不再需要使用map函數(shù)進行映射；體積非常小，只有1KB左右；pinia支持插件來擴展自身功能；支持服務(wù)端渲染；任務(wù)8.1pinia的安裝與配置【知識鏈接】8.1.2pinia核心概念1.store介紹一個store就是一個pinia實體，它持有未綁定到您的組件樹的狀態(tài)和業(yè)務(wù)邏輯。換句話說，它托管全局狀態(tài)。store中可以掛載state、getters、actions、plugins等模塊，如圖8-5所示。state、getters和actions相當(dāng)于組件中的data、computed和methods。分別用于管理全局數(shù)據(jù)、全局數(shù)據(jù)計算值以及業(yè)務(wù)邏輯。圖8-5store核心模塊任務(wù)8.1pinia的安裝與配置【知識鏈接】8.1.2pinia核心概念2.定義store在深入了解核心概念之前，我們需要知道Store是使用defineStore(name,opt)定義的，并且它需要一個唯一名稱，作為第一個參數(shù)傳遞：

import{defineStore}from'pinia'

//useStore可以是useUser、useCart之類的內(nèi)容

//第一個參數(shù)是應(yīng)用程序中store的唯一id

exportconstuseStore=defineStore('main',{

//其它配置...

})defineStore(name,opt)函數(shù)中的name參數(shù)也稱為id，是必要的，具有唯一性。opt是一個對象，其中包括掛載到store上的state、actions、getters、plugins等，這些掛載對象都是可選項任務(wù)8.1pinia的安裝與配置【知識鏈接】8.1.2pinia核心概念3.使用store定義好一個store之后我們可以在setup()中調(diào)用useStore()函數(shù)創(chuàng)建store。例如：

<scriptsetup>

//導(dǎo)入useShopStore方法

importuseShopStorefrom'./store/index.js'

conststore=useShopStore();

//打印store

console.log(store);

</script>可以根據(jù)需要定義任意數(shù)量的store，如果需要定義多個store，應(yīng)該在不同的文件中創(chuàng)建不同的store，以便于管理和維護，同時需要注意每個store必須有唯一的id。一旦store被實例化，你就可以直接在store上訪問state、getters和actions中定義的任何屬性了。任務(wù)8.2文章數(shù)據(jù)全局管理【任務(wù)陳述】本任務(wù)要求使用pinia庫對“就業(yè)指導(dǎo)”頁中的作者和文章概覽數(shù)據(jù)進行保存，如圖8-6所示。并在對應(yīng)的文章詳情頁中進行作者和文章概覽內(nèi)容的渲染，如圖8-7所示。圖8-6全局保存“就業(yè)指導(dǎo)”頁數(shù)據(jù)任務(wù)8.2文章數(shù)據(jù)全局管理【任務(wù)陳述】本任務(wù)要求使用pinia庫對“就業(yè)指導(dǎo)”頁中的作者和文章概覽數(shù)據(jù)進行保存，如圖8-6所示。并在對應(yīng)的文章詳情頁中進行作者和文章概覽內(nèi)容的渲染，如圖8-7所示。圖8-7文章詳情頁重新渲染全局數(shù)據(jù)任務(wù)8.2文章數(shù)據(jù)全局管理【任務(wù)分析】完成本任務(wù)需要同學(xué)們掌握以下知識點：store的定義和使用；state全局數(shù)據(jù)保存與讀??；action全局業(yè)務(wù)邏輯的定義與使用。任務(wù)流程如圖8-8所示。圖8-8任務(wù)流程圖任務(wù)8.2文章數(shù)據(jù)全局管理【任務(wù)實施】步驟一.定義全局數(shù)據(jù)和方法。進入項目store文件夾，在state.js中定義需要使用的全局數(shù)據(jù)。exportdefault()=>{

return{

//文章作者

author:0,

//文章概覽

introduce:0

}

}在actions.js中定義全局方法，本案例中需要全局保存“就業(yè)指導(dǎo)”頁的作者和文章概覽數(shù)據(jù)，所以我們在actions.js中定義store方法，用于存儲這些數(shù)據(jù)。

exportdefault{

store(data){

this.author=data.author

roduce=roduce

}

}在actions.js中定義全局方法，本案例中需要全局保存“就業(yè)指導(dǎo)”頁的作者和文章概覽數(shù)據(jù)，所以我們在actions.js中定義store方法，用于存儲這些數(shù)據(jù)。其中“this”指代pinia中的數(shù)據(jù)對象，data用于接收輸入該方法的具體數(shù)據(jù)內(nèi)容。任務(wù)8.2文章數(shù)據(jù)全局管理【任務(wù)實施】步驟二.全局數(shù)據(jù)保存與展示。在“List.vue”組件（就業(yè)指導(dǎo)頁）中保存選中文章的作者和文章概覽數(shù)據(jù)。

<scriptsetup>

import{defineProps,toRefs}from'vue'

import{useRouter}from'vue-router'

//導(dǎo)入store

importuseStorefrom'../store/index.js'

conststore=useStore()

constrouter=useRouter()

constprops=defineProps({

articleList:Array

})

const{articleList}=toRefs(props)

functiongoArticle(item){

//保存數(shù)據(jù)

store.store(item)

router.push("/article/"+item.id)

}

</script>任務(wù)8.2文章數(shù)據(jù)全局管理【任務(wù)實施】步驟二.全局數(shù)據(jù)保存與展示。在SingleArticle.vue組件（文章詳情頁）中渲染保存的全局數(shù)據(jù)。<template><!--......

-->

<divclass="bg-lightp-2pt-4mt-4mb-4rounded"v-if="introduce">

<pclass="d-flexjustify-content-between">

<small>{{introduce}}</small>

<smallstyle="min-width:150px;text-align:right;">

{{author}}

</small>

</p>

</div><!--......

--></template><scriptsetup>

import{reactive,getCurrentInstance}from'vue'

import{useRouter}from'vue-router'

//導(dǎo)入pinia

importuseStorefrom'../store/index.js'

import{storeToRefs}from'pinia'

conststore=useStore()

//解構(gòu)數(shù)據(jù)

const{author,introduce}=storeToRefs(store)</script>運行代碼，點擊“就業(yè)指導(dǎo)”頁中任意文章列表，便可看到如圖8-5、圖8-6所示效果。任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.1state的定義和使用state是store的核心部分，用來存放公共數(shù)據(jù)。接下來我們通過【例8-1】說明如何定義和使用state中的數(shù)據(jù)?！纠?-1】使用state中的數(shù)據(jù)進行頁面渲染。具體步驟如下。（1）創(chuàng)建工程項目，下載pinia庫，并在main.js中進行導(dǎo)入與掛載。import{createApp}from'vue'//導(dǎo)入createPinia方法import{createPinia}from'pinia'importAppfrom'./App.vue'//創(chuàng)建pinia實例constpinia=createPinia()constapp=createApp(App)//全局注冊piniaapp.use(pinia)app.mount('#app')任務(wù)8.2文章數(shù)據(jù)全局管理（2）在工程項目的src目錄中新建store目錄，在該目錄中新建state.js文件。我們定義兩個全局數(shù)據(jù)num和price，分別用于表示商品數(shù)量與商品單價。

exportdefault()=>{

return{

//商品價格

price:10,

//商品數(shù)量

num:0

}

}（3）在store目錄中新建index.js文件，用于創(chuàng)建store和掛載state。

import{defineStore}from'pinia'

importstatefrom'./state.js'

conststore=defineStore('shop',{

state,

})

exportdefaultstore任務(wù)8.2文章數(shù)據(jù)全局管理（4）接下來我們在App.vue的頁面中顯示state中的數(shù)據(jù)。

<template>

<div>

<button>-</button>

<spanclass="num">商品數(shù)量:{{num}}</span>

<button>+</button>

</div>

<div>

<button>-</button>

<spanclass="num">商品價格:{{price}}</span>

<button>+</button>

</div>

</template>

<scriptsetup>

importuseStorefrom'./store/index.js'

//導(dǎo)入store映射函數(shù)

import{storeToRefs}from'pinia';

conststore=useStore();

//映射num和price數(shù)據(jù)

const{num,price}=storeToRefs(store);

</script>

<stylescoped>

.num{

height:20px;

font-size:14px;

text-align:left;

line-height:20px;

border:1pxsolidrgb(182,182,182);

display:inline-block;

vertical-align:middle;

padding:015px;

margin:10px;

}

</style>任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.1state的定義和使用訪問state中的數(shù)據(jù)首先需要將store導(dǎo)入，接著通過pinia中的storeToRefs方法將state中的數(shù)據(jù)映射到當(dāng)前組件中。這樣我們就可以在組件中直接使用state中的數(shù)據(jù)了。渲染工程文件，代碼運行效果如圖8-9所示。圖8-9通過actions修改state數(shù)據(jù)任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.1state的定義和使用（5）如何做到點擊頁面上的加減按鈕修改state中的數(shù)據(jù)呢？我們可以為頁面上的加減按鈕綁定如下代碼。

<template>

<div>

<button@click="subNum">-</button>

<spanclass="num">商品數(shù)量:{{num}}</span>

<button@click="addNum">+</button>

</div>

<div>

<button@click="subPrice">-</button>

<spanclass="num">商品價格:{{price}}</span>

<button@click="addPrice">+</button>

</div>

</template><scriptsetup>

//......

//商品數(shù)量加減

functionsubNum(){

num.value-=1

console.log("state中的num:",store.$state.num)

}

functionaddNum(){

num.value+=1

console.log("state中的num:",store.$state.num)

}

//價格加減

functionsubPrice(){

price.value-=1

console.log("state中的price:",store.$state.price)

}

functionaddPrice(){

price.value+=1

console.log("state中的price:",store.$state.price)

}

</script>任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.1state的定義和使用運行代碼，點擊頁面上的加減按鈕，效果如圖8-10所示，通過頁面數(shù)據(jù)和控制臺打印數(shù)據(jù)的對比不難發(fā)現(xiàn)，當(dāng)我們操作頁面數(shù)據(jù)時，state全局數(shù)據(jù)也發(fā)生了相應(yīng)改變。圖8-10state數(shù)據(jù)修改雖然通過這種方式能夠修改全局state中的數(shù)據(jù)，但是不推薦這么操作。缺乏統(tǒng)一的管理容易照成數(shù)據(jù)的混亂和難以維護，所以此時我們就需要借助actions模塊對數(shù)據(jù)進行統(tǒng)一管理，即管理邏輯代碼部分。任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.2action的定義和使用（1）在上一個案例的基礎(chǔ)上補充actions模塊。在src目錄中新actions.js文件，actions相當(dāng)于組件中的methods，能夠用于處理同步方法和異步方法。它們可以使用defineStore()中的actions屬性定義，并且它們非常適合定義業(yè)務(wù)邏輯。在actions.js文件定義修改state數(shù)據(jù)的方法。

exportdefault{

//增加商品數(shù)量

addNum(){},

//減少商品數(shù)量

subNum(){},

//增加商品價格

addPrice(){},

//減少商品價格

subPrice(){}

}（2）在index.js中輸入如下代碼，將actions模塊掛載到store中。

import{defineStore}from'pinia'

importstatefrom'./state.js'

importactionsfrom'./actions'

conststore=defineStore('shop',{

state,

actions

})

exportdefaultstore任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.2action的定義和使用（3）在actions.js中定義修改state數(shù)據(jù)的方法。

exportdefault{

//增加商品數(shù)量

addNum(n){this.num+=n},

//減少商品數(shù)量

subNum(n){this.num-=n},

//增加商品價格

addPrice(n){this.price+=n},

//減少商品價格

subPrice(n){this.price-=n}

}在actions方法中，可以通過this訪問store實例并提供完整類型支持。方法中的“n”用于接收傳入該方法的實參數(shù)值，如果需要傳入多個屬性，n可以使用對象類型。任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.2action的定義和使用（4）在App.vue中通過actions操作state數(shù)據(jù)，做到數(shù)據(jù)的統(tǒng)一管理。

//商品數(shù)量加減

functionsubNum(){

store.subNum(1)

console.log("state中的num:",store.$state.num)

}

functionaddNum(){

store.addNum(1)

console.log("state中的num:",store.$state.num)

}//價格加減

functionsubPrice(){

store.subPrice(1)

console.log("state中的price:",store.$state.price)

}

functionaddPrice(){

store.addPrice(1)

console.log("state中的price:",store.$state.price)

}任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.2action的定義和使用運行代碼，點擊頁面上的加減按鈕，效果如圖8-11所示，通過actions同樣能夠?qū)tate全局數(shù)據(jù)進行操作。相較于在Vue實例中直接修改state中的數(shù)據(jù)，通過actions進行數(shù)據(jù)管理能夠使管理方法更為集中統(tǒng)一，便于數(shù)據(jù)的維護。圖8-11通過actions修改state數(shù)據(jù)任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.3getters的定義和使用我們繼續(xù)在上一個案例的基礎(chǔ)上補充getters模塊，getter完全等同于Store狀態(tài)的計算值，可以將其看作組件中的computed。getter的返回值會根據(jù)它的依賴被緩存起來，而且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算。（2）在index.js中輸入如下代碼，將getters掛載至store中。

import{defineStore}from'pinia'

importstatefrom'./state.js'

importactionsfrom'./actions'

importgettersfrom'./getters'

conststore=defineStore('articles',{

state,

actions,

getters

})

exportdefaultstore（1）在src目錄下新建getters.js。通過該模塊計算商品總價，當(dāng)state中的num或price改變時，商品總價將隨之變化。

exportdefault{

totalPrice:(state)=>{

returnstate.num*state.price;

},

}任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.3getters的定義和使用（3）在App.vue中使用getter顯示商品總價。

<template>

<div>

<button@click="subNum">-</button>

<spanclass="num">商品數(shù)量:{{num}}</span>

<button@click="addNum">+</button>

</div>

<div>

<button@click="subPrice">-</button>

<spanclass="num">商品價格:{{price}}</span>

<button@click="addPrice">+</button>

</div><div>

<!--使用getter-->

<spanclass="num">商品總價:{{totalPrice}}</span>

</div>

</template><scriptsetup>

importuseStorefrom'./store/index.js'

//導(dǎo)入store映射函數(shù)

import{storeToRefs}from'pinia';

conststore=useStore();

//映射num、price和totalPrice數(shù)據(jù)

const{num,price,totalPrice}=storeToRefs(store);//......</script>任務(wù)8.2文章數(shù)據(jù)全局管理【知識鏈接】8.2.3getters的定義和使用在App.vue中使用getters十分方便，僅需通過storeToRefs(store)方法解構(gòu)出store中的數(shù)據(jù)即可直接使用。運行代碼，效果如圖8-12所示。圖8-12getter數(shù)據(jù)計算效果任務(wù)總結(jié)與拓展通過該任務(wù)的實施，掌握了pinia庫以及pinia的安裝和配置及各個核心模塊的使用方法，pinia目前已成為Vue開發(fā)者首選的狀態(tài)管理工具，要求需要熟悉pinia中各核心模塊的定義和使用方法。在pinia的官方文檔中還提供了更多的API方法，可以通過官方文檔繼續(xù)深入學(xué)習(xí)。pinia具有和Vue3一致的函數(shù)編程思想，并能良好的支持TypeScript，讀者可以在本章節(jié)基礎(chǔ)之上繼續(xù)強化學(xué)習(xí)，加深對pinia的了解。需要注意的是對于一些較為私密的全局業(yè)務(wù)數(shù)據(jù)，需要做好安全管理，以防數(shù)據(jù)泄露?！舅伎肌咳绾卧趐inia中使用插件。35項目托管與發(fā)布任務(wù)9框架技術(shù)應(yīng)用掌握gitee代碼托管和研發(fā)協(xié)作平臺的使用?！局R目標】掌握git倉庫的創(chuàng)建。掌握將本地項目托管到gitee倉庫的方法?！炯寄苣繕恕磕軌蚴炀殞㈨椖客泄茉趃itee上。【素質(zhì)目標】培養(yǎng)定時備份項目的良好工作習(xí)慣。培養(yǎng)良好的合作精神。【項目背景】本任務(wù)負責(zé)將“就業(yè)職通車”網(wǎng)站進行托管和發(fā)布。通過學(xué)習(xí)Gitee平臺的使用，實現(xiàn)將網(wǎng)站項目托管到Gitee上。任務(wù)規(guī)劃本任務(wù)要求將“就業(yè)職通車”網(wǎng)站托管在Gitee上。學(xué)習(xí)目標任務(wù)9.1gitee倉庫的使用【任務(wù)陳述】碼云Gitee是開源中國社區(qū)在2013年推出的基于Git的代碼托管服務(wù)，專為開發(fā)者提供穩(wěn)定、高效、安全的云端軟件開發(fā)協(xié)作平臺，無論是個人、團隊、或是企業(yè)，都能夠用Gitee實現(xiàn)代碼托管、項目管理、協(xié)作開發(fā)。在企業(yè)開發(fā)通常使用Gitee更的好去使用Git上傳自己的代碼和托管項目，同時也可以到Gitee官網(wǎng)去分享自己的項目?！救蝿?wù)分析】本任務(wù)要求掌握Gitee倉庫的創(chuàng)建。任務(wù)流程如圖9-1所示。圖9-1任務(wù)流程圖任務(wù)9.1gitee倉庫的使用【任務(wù)實施】步驟一.登錄Gitee創(chuàng)建一個名為“myweb”的倉庫。瀏覽器訪問gitee并登錄，如圖9-2所示。圖9-2Gitee登錄界面任務(wù)9.1gitee倉庫的使用【任務(wù)實施】步驟一.登錄Gitee創(chuàng)建一個名為“myweb”的倉庫。單擊“新建倉庫”選項新建倉庫，如圖9-3所示。圖9-3新建倉庫入口任務(wù)9.1gitee倉庫的使用【任務(wù)實施】步驟一.登錄Gitee創(chuàng)建一個名為“myweb”的倉庫。填寫倉庫相關(guān)信息，然后單擊“創(chuàng)建”按鈕完成倉庫創(chuàng)建，如圖9-4所示。圖9-4新建倉庫界面任務(wù)9.1gitee倉庫的使用【任務(wù)實施】步驟一.登錄Gitee創(chuàng)建一個名為“myweb”的倉庫。創(chuàng)建成功后，自動跳轉(zhuǎn)到倉庫頁面，如圖9-5所示。圖9-5倉庫頁面任務(wù)9.1gitee倉庫的使用【知識鏈接】9.1.1新建倉庫（1）登錄gitee（網(wǎng)址：/），，還未擁有g(shù)itee賬戶的同學(xué)，請先申請賬戶。（2）在個人主頁當(dāng)中單擊“新建倉庫”選項，如圖9-6所示。圖9-6創(chuàng)建倉庫任務(wù)9.1gitee倉庫的使用【知識鏈接】9.1.1新建倉庫（3）新建代碼倉庫配置，倉庫的具體配置說明如表9-1如示。表9-1倉庫具體配置描述任務(wù)9.1gitee倉庫的使用【知識鏈接】9.1.1新建倉庫（4）配置新倉庫，根據(jù)平臺提示填寫相關(guān)信息，如圖9-7所示。圖9-7配置倉庫任務(wù)9.1gitee倉庫的使用【知識鏈接】9.1.2刪除倉庫新建倉庫之后，如果需要刪除。用戶可以在倉庫主頁中倉庫主頁單擊->“管理”「管理」->“倉庫設(shè)置”「倉庫設(shè)置」->“刪除倉庫”選項「刪除倉庫」對倉庫執(zhí)行進行刪除操作。在確認操作后，要求對用戶進行密碼校驗確認。校驗密碼后即可刪除倉庫，如圖9-8、圖9-9所示。圖9-8進入倉庫首頁任務(wù)9.1gitee倉庫的使用【知識鏈接】9.1.2刪除倉庫新建倉庫之后，如果需要刪除。用戶可以在倉庫主頁中倉庫主頁單擊->“管理”「管理」->“倉庫設(shè)置”「倉庫設(shè)置」->“刪除倉庫”選項「刪除倉庫」對倉庫執(zhí)行進行刪除操作。在確認操作后，要求對用戶進行密碼校驗確認。校驗密碼后即可刪除倉庫，如圖9-8、圖9-9所示。圖9-9刪除倉庫任務(wù)9.1gitee倉庫的使用【知識鏈接】9.1.3邀請團隊成員新建倉庫之后，如果需要邀請團隊成員，可以通過倉庫主頁->倉庫成員管理進行用戶邀請，如圖9-10所示。圖9-10邀請團隊成員任務(wù)9.2項目打包與發(fā)布【任務(wù)陳述】本任務(wù)要求將將“就業(yè)職通車”網(wǎng)站打包發(fā)布到Gitee倉庫上【任務(wù)分析】本任務(wù)要求在Gitee（網(wǎng)址：/）上創(chuàng)建一個倉庫，并將“就業(yè)職通車”網(wǎng)站打包發(fā)布到該Gitee倉庫上。任務(wù)流程如圖9-11所示。圖9-11任務(wù)流程圖任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】步驟一.下載安裝git軟件。通過git官網(wǎng)下載git軟件，如圖9-12所示。圖9-12git下載界面任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】步驟一.下載安裝git軟件。雙擊運行下載下來的exe文件進行安裝。單擊“Next”按鈕進入下一步操作，如圖9-13所示。圖9-13安裝流程一任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】步驟一.下載安裝git軟件。選擇安裝路徑（一般不安裝在系統(tǒng)盤），如圖9-14所示。圖9-14安裝流程二任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】步驟一.下載安裝git軟件。根據(jù)自己需要選擇勾選對應(yīng)選項，也可以保持默認配置選擇，如圖9-15所示。圖9-15安裝流程三任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】步驟一.下載安裝git軟件。接下來都選擇“Next”按鈕,如圖9-16所示。圖9-16安裝流程四任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】步驟一.下載安裝git軟件。單擊“Iinstall”按鈕進行安裝，如圖9-17所示。圖9-17安裝流程五任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】步驟二.在git軟件中對賬戶和郵箱進行配置。打開Gitbash，如圖9-18所示。圖9-18GitBash任務(wù)9.2項目打包與發(fā)布【任務(wù)實施】配置賬戶和郵箱。使用如下命令配置賬戶：gitconfig–global“名字”