《Vue.js前端開發(fā)實(shí)戰(zhàn)（慕課版第2版）》課件 第13、14章 Vue CLI、狀態(tài)管理_第1頁
《Vue.js前端開發(fā)實(shí)戰(zhàn)（慕課版第2版）》課件 第13、14章 Vue CLI、狀態(tài)管理_第2頁
《Vue.js前端開發(fā)實(shí)戰(zhàn)（慕課版第2版）》課件 第13、14章 Vue CLI、狀態(tài)管理_第3頁
《Vue.js前端開發(fā)實(shí)戰(zhàn)（慕課版第2版）》課件 第13、14章 Vue CLI、狀態(tài)管理_第4頁
《Vue.js前端開發(fā)實(shí)戰(zhàn)（慕課版第2版）》課件 第13、14章 Vue CLI、狀態(tài)管理_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

VueCLI02VueCLI的安裝03創(chuàng)建項(xiàng)目04項(xiàng)目結(jié)構(gòu)05編寫一個(gè)單文件組件AI輔助編程06VueCLI簡(jiǎn)介01VueCLI簡(jiǎn)介包名的變化一個(gè)基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng)@vue/clivue-cliCLI服務(wù)CLI三個(gè)獨(dú)立的部分CLI插件全局安裝的npm包，提供了一些vue命令一個(gè)開發(fā)環(huán)境依賴，它是一個(gè)npm包，本地安裝在@vue/cli創(chuàng)建的每個(gè)項(xiàng)目中向Vue項(xiàng)目提供可選功能的npm包npminstall-g@vue/cli命令vue--version查看版本號(hào)VueCLI的安裝需要進(jìn)行全局安裝

如果想安裝@vue/cli的指定版本，可以在上述命令的最后添加“@”符號(hào)，在“@”符號(hào)后添加要安裝的版本號(hào)。示例安裝@vue/cli5.0.6版本。npminstall-g@vue/cli@5.0.6VueCLI需要計(jì)算機(jī)連接互聯(lián)網(wǎng)才能安裝成功。創(chuàng)建項(xiàng)目使用vuecreate命令使用圖形界面vuecreatemyapp命令使用vuecreate命令vueui命令使用圖形界面項(xiàng)目結(jié)構(gòu)項(xiàng)目結(jié)構(gòu)App.vue文件<template><imgalt="Vuelogo"src="./assets/logo.png"><HelloWorldmsg="WelcometoYourVue.jsApp"/></template><script>importHelloWorldfrom'./components/HelloWorld.vue'exportdefault{name:'App',components:{HelloWorld}}</script><style>#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>App組件是項(xiàng)目的根組件。在實(shí)際開發(fā)中，可以修改代碼中的import語句，將引入的組件替換為其他組件即可。一個(gè)單文件組件，在文件中包含了模板代碼、組件代碼和CSS樣式規(guī)則項(xiàng)目結(jié)構(gòu)main.js文件import{createApp}from'vue'importAppfrom'./App.vue'

createApp(App).mount('#app')程序入口的JavaScript文件，主要用于加載公共組件和項(xiàng)目需要用到的各種插件，并創(chuàng)建Vue的根實(shí)例項(xiàng)目結(jié)構(gòu)index.html文件<!DOCTYPEhtml><htmllang=""><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="icon"href="<%=BASE_URL%>favicon.ico"><title><%=htmlWebpackPlugin.options.title%></title></head><body><noscript><strong>We'resorrybut<%=htmlWebpackPlugin.options.title%>doesn'tworkproperlywithout JavaScriptenabled.Pleaseenableittocontinue.</strong></noscript><divid="app"></div><!--builtfileswillbeautoinjected--></body></html>項(xiàng)目的主文件，文件中有一個(gè)id屬性值為app的div元素，組件實(shí)例會(huì)自動(dòng)掛載到該元素上

在項(xiàng)目中使用單文件組件定義電影信息，包括電影圖片、電影名稱、類型、簡(jiǎn)介、上映時(shí)間和票房。實(shí)例編寫一個(gè)單文件組件將一個(gè)組件的HTML、JavaScript和CSS應(yīng)用各自的標(biāo)簽寫在一個(gè)文件中單文件組件.vue文件擴(kuò)展名AI輔助編程編寫一個(gè)簡(jiǎn)單的計(jì)數(shù)器組件實(shí)現(xiàn)選項(xiàng)卡切換圖片效果狀態(tài)管理Vuex簡(jiǎn)介Vuex的安裝基礎(chǔ)用法實(shí)例AI輔助編程Vuex簡(jiǎn)介Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)來管理應(yīng)用程序中所有組件的狀態(tài)。Vuex的安裝<scriptsrc="/vuex@next"></script>代碼使用CDN方式

在安裝Vuex時(shí)，要安裝支持Vue3.0的Vuex需要使用vuex@next，要安裝支持Vue2.x的Vuex需要使用vuex。npminstallvuex@next--save命令使用NPM方式y(tǒng)arnaddvuex@next--save命令使用yarn方式使用VueCLI創(chuàng)建項(xiàng)目在項(xiàng)目的配置選項(xiàng)中應(yīng)用空格鍵選擇Vuex基礎(chǔ)用法Vuex的組成在項(xiàng)目中使用VuexVuex的組成存儲(chǔ)項(xiàng)目中需要多組件共享的數(shù)據(jù)或狀態(tài)Vuex組成statemutationsgettersactionsmodules從state中派生出狀態(tài)存儲(chǔ)更改state狀態(tài)的方法通過提交mutations中的方法來改變狀態(tài)store的子模塊在項(xiàng)目中使用Vuex創(chuàng)建store定義state定義getter定義mutation定義action創(chuàng)建storestore/index.jsimport{createStore}from'vuex'

exportdefaultcreateStore({

state:{

},

getters:{

},

mutations:{

},

actions:{

},

modules:{

}

})main.jsimport{createApp}from'vue'

importAppfrom'./App.vue'

importstorefrom'./store'

createApp(App).use(store).mount('#app')定義state在store實(shí)例的state中可以定義需要共享的數(shù)據(jù)定義getter

如果需要從state中派生出一些狀態(tài)就需要使用getter。getter相當(dāng)于Vue中的computed計(jì)算屬性，getter的返回值會(huì)根據(jù)它的依賴被緩存起來，只有當(dāng)它的依賴值發(fā)生改變時(shí)才會(huì)被重新計(jì)算。getter會(huì)接收state作為第一個(gè)參數(shù)。定義mutation

每個(gè)mutation都有一個(gè)字符串的事件類型（type）和一個(gè)回調(diào)函數(shù)（handler）。這個(gè)回調(diào)函數(shù)可以實(shí)現(xiàn)狀態(tài)更改，并且它會(huì)接收state作為第一個(gè)參數(shù)。

在store實(shí)例的mutations中定義更改state狀態(tài)的函數(shù)，然后在組件中應(yīng)用commit方法提交到對(duì)應(yīng)的mutation，實(shí)現(xiàn)更改state狀態(tài)的目的。更改

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論