本文主要介紹vue高級視頻教程(vue高級)，下面一起看看vue高級視頻教程(vue高級)相關資訊。
目錄21，項目建設規(guī)范1，創(chuàng)建項目2，代碼規(guī)范a，。editorconfig(編輯器編輯樣式)b、appellizer(代碼格式化樣式)c、eslint(代碼樣式檢測工具)d、git husky(提交前的代碼格式化樣式)e、commitizen(提交信息格式化樣式)f、commitlint 3。項目結構a，vue.config.jsb，vue-routerc，vuexd，element-pluse，axiosf，環(huán)境變量g，tsconfig.jsonh，shims-vu:-手動選擇功能？檢查您的project:所需的功能-選擇vue版本，巴別塔，ts，路由器，vuex，css預處理器，linter？選擇一個您希望用- 3.x啟動項目的vue.js版本？使用類樣式的組件語法？-沒有嗎？在typescript旁邊使用babel(現(xiàn)代模式、自動檢測的polyfills、transpiling jsx所需的)？-什么事？對路由器使用歷史模式？(需要為生產(chǎn)中的索引回退設置正確的服務器)-否？挑選一個css預處理器(postcss、autoprefixer和css模塊受d:-薩斯/scss(帶dart-薩斯)支持)？選擇阿林config:-更漂亮？選擇額外的皮棉f:-皮棉保存？你更喜歡把babel，eslint等的配置放在哪里？？-在專用配置文件中？將此存儲為未來項目的預置？-沒有嗎？選擇安裝dependenci:-npm2時使用的軟件包管理器，代碼規(guī)范a，。editor config # root = true[*]#表示charset = utf-8 #適用于所有文件，文件字符集為utf-8 indent _ style = space # indent _ size = 2 #縮進大小end_of_line = lf #控制換行符類型(lf | cr | crlf)trim _ trailing _ white space = true #刪除行首的任何空白字符insert_final_newline = true #總是在文件末尾插入一個新行[*。md] #表示只有md文件服從以下規(guī)則:max _ line _ length = off trim _ trailing _ white spac:假，;tabwidth;: 2，;printwidth;: 80，;singl:真，;trailingcomma;:和；無 、;s: false } * use tabs:使用制表符縮進或空格縮進，并選擇false * tabwidth:空格的情況下有多少個制表符？空格，選擇兩個* printwidth:一個行字符的長度推薦時，推薦80，也有人偏愛100或120* singlequote:使用單引號或雙引號，選擇true，使用單引號* trailingcomma:是否添加多行輸入的尾部逗號，設置為` none`* semi:是否在句尾添加符號，默認值為true，選擇false表示不添加。pretierignore/dist/*。local.output.js/node _模塊/* * */*。svg * */*。sh/public/* package . json { ;scripts;: { ;pr: 寫得更漂亮。 }}c、eslint(代碼風格檢測工具)安裝npm i-d eslint-plugin-pretier eslint-config-pretier . eslintrc . jsmodul: tru: { nod: tru:[ ;plugin: vue/vue 3-essential ;， eslint:推薦 ， @ vue/typescript/推薦 ， @ vue/beauty ;， @ vue/appeller/@ typescript-eslint ;，//解決eslint和pretier 插件:普雷蒂爾/推薦 ]、pars: {ecmav: 2020 }、rul: { ;no-consol: proc: ;關閉 ，;no-d: proc: ;關閉 ， @ typescript-: ;關閉 ， @ typescript-eslint/no-explicit-any ;: ;關閉 ，@ typescript-eslint/explicit-module-boundary-types ;: ;關閉 } d、git husky(提交前代碼格式化樣式)命令# # # # # # # # # # # 1，用于攔截git命令#-多一個包的依賴。json ({;devdependenci: {;husky;:公司 } })#-再來一張。哈斯基目錄下的項目#-包。json有一個以上的腳本({;scripts;: {;pr: 哈斯基安裝和安裝；} })# # # # # # # # # # install.husky/pre-commit#!. npx哈士奇-init npm/usr/bin/env sh。 $(dirname- 0美元 )/_/husky . sh npm runlint，commitizen(提交信息的格式樣式)安裝npm i -d commitizen命令# # # # # # # # # 1。-package.json多了一個依賴項({;devdependenci: {;cz-conventional-chang: }}) #-package.json多了一個配置#({;config;: {;commitiz: {;path;: 。/node _ modules/cz-conventi on-changelog } } })# # # # # # # # # # # # # # npx commit izen initcz-convention-changelog-save-dev-save-exact package . json(代碼的gi不使用這個腳本提交){;scripts;: {;commit;: cz }}選項？選擇您要更改的類型。;re committing cho3-@ . com-投稿類型？這個改動的范圍(如組件或文件名):-提交范圍？寫一個簡短、緊急的變更描述(最多87個字符):-簡短描述信息提交？提供chang:的詳細描述-詳細描述信息提交？有什么突破性的變化嗎？-沒有嗎？此更改是否會影響任何未解決的問題？no submission類型用于添加功能feat、修復bug、修改文檔、修改樣式代碼格式(空白、格式、缺少分號等)refactor代碼refactor)perf改善性能(改善性能的代碼更改)test測試(添加缺少的測試時)。build改變了項目的構造或外部依賴關系(如scop: web pack、gulp、npm等。)ci更改持續(xù)集成軟件的配置文件，并在包中編寫命令腳本，例如scop:的travis。圈等雜務改變構建流程或輔助工具(如改變測試環(huán)境)revert code back f、commitlint(提交信息風格檢測工具)安裝npm i -d @commitlint/config-committal @ committal/cli committal . config . js modul:[ ;@ committal/config-conventi on ;]}命令# # # # # # # # # # # # # 1。項目中的一個變化:多了一個commit-msg文件# # # # # # # # # # npx哈斯基添加。哈士奇/提交-消息和npx-不安裝提交林特-編輯$ 1 3，項目結構a，vue . config . js const path = r:配置(推薦)outputdir: ;距離和距離。;通過vue cli提供的選項。publicpath: ;/ ;、// 2、模式2 :通過configurewebpack(與webpack配置選項一致)// 2.1、對象:configurewebpack: {r: {alias: { components: ;@/組件 }}帶有合并的webpack配置。// 2.2.功能:修改web pack/* configurewebpack:(config)= { config . r: path . resolve(_ _ dirname， src )，compon: ;@/組件 } }, *//3.三:通過chainwebpack修改webpack的配置(與webpack的配置選項一致)// 3.1。函數(shù):chainwebpack:(配置)= { config . resolve . alias . set( ;@ ，path.resolve (_ _ dirname， src )).et( ;組件及配件。;， @/組件 )} */} b、vue-router安裝npm i-vue-router @ nextsrc/router/index . t import { create router，createwebhashhistory } from vue-路由器 從 amp導入類型{ routerecordraw };;vu: arrayrouterecordraw =[{ path: ;/ ;、redirect: ;/hom: ;/home ;，compon:=進口( ../vi: ;/關于 ，compon:=進口( ../views/about . vue ;)}]const router = cr: createwebhashhistory，routes})導出默認路由器rc/main . t import { create app } from ;vue 從導入應用程序 。/app . vue ;從導入路由器 。/路由器 const app = create app(app)app . use(router)app . mount( ;# app )src/app.vuetemplate div路由器-link to = /home 家庭/路由器-鏈接路由器-鏈接到= /關于 關于/router-link/div router-view//template c，vuex安裝npm i-svuex @ nextsrc/store/index . tsimport { cr: iuserstate }導出默認cr: {用戶}})導出函數(shù)use store{ return usevuexstoreirootstate} src/stor:字符串us: { id:字符串nicknam:字符串} } const us: modulei userstate，irootstate = { namespac: tru: ; ，us: { id: ; 、nicknam: ; } } }，mutations: { }，actions: { } }導出默認用戶src/main . t從 vue 從導入應用程序 。/app . vue ;從導入商店 。/store ;const app = create app(app)app . use(store)app . mount( ;# app )src/app . vue template div/div/template script lang = ts 從 amp導入{ definecomponent };;vue 從 amp導入{ usestore };;@/store ;導出默認定義組件({ setup{ const store = use storeconsole . log(store . state . user . token)return { } })/script style lang = scss scoped/style、element-plus安裝npm i-s element-plus src/main . tsimport { create app } from ;vue 從導入應用程序 。/app . vue ;從導入element plus ;元素加 進口與貿易。;element-plus/dist/index .;const app = create app(app)app . use(element plus)app . mount( ;# app )src/ app。vue模板el按鈕類型= 小學和初中黃婷婷/el-button/templatee，axios安裝npm i -s axios知識點* promiseany指定泛型，那么resolve的res(res)和。然后(res={})是任意類型*默認值axios配置優(yōu)先級:請求的配置參數(shù)實例的defaults屬性* axios實例的多個攔截器將被合并。執(zhí)行順序是src/utils/request . tsimport axios from ;axios和。;從 amp導入類型{axiosrequestconfig};;axios和。;從 amp導入cookies;js-cookie ;const service = axios . cr: proc: 5000 })服務。interceptors . request . use((config)= {//1，add token const token = cookies。獲取( token )if (tokenconfig。頭)添加到請求頭。{ config . headers . authorization = ` bearer $ { token } `} return config }，(錯誤)= {返回承諾。拒絕(錯誤)})服務。截擊機?；貞Ｊ褂?(response) = {//2)，狀態(tài)碼開關(response.data.cod:控制臺. log( ;誤差 )break default : } return response }、(error) = {// 3、狀態(tài)碼開關(error.response.status)用于處理http { cas: console . log( ;未經(jīng)認證或令牌過期。;).break cas:控制臺。;拒絕未經(jīng)授權的訪問。;)br:}退貨承諾。reject (error)})接口iresponsebodyt = any { cod:號data: t m:字符串}導出默認函數(shù)t = any(config: axiosrequestconfig): promiseiresponsebodyt { return service(config))。then((res)= { return res . data })} src/api/us:任何){返回請求({ url: ;/用戶/登錄 、m: ;郵政和郵政。;，data })} src/app . vue template div/div/template script lang = ts 從導入{ definecomponent } vue 從 @/api/用戶 導出默認的define component({ setup{ log in({ })。然后((res)= { console . log(res)})return { } })/script style lang = scss /stylef，環(huán)境變量* mode:-script命令:vue-cli-service serve(默認模式開發(fā))參考文件:。env . developnode env:process . env . node _ env = 發(fā)展與創(chuàng)新-腳本命令:vue-cli-servicebuilding。d(默認模式生產(chǎn))參考文件:。env . production ode _ env:process . env . node _ env = 生產(chǎn)與銷售-script命令:vue-cli-服務構建模式轉移(手動指定)參考文件:。env.st agingnode _ env: process。環(huán)境。node _ env = 舞臺表演和表演* node _ env變量不需要手動賦值*其他變量在自動注入代碼之前應該以vue_app_開頭*。環(huán)境優(yōu)先級低于環(huán)境開發(fā)或環(huán)境生產(chǎn)等。ts config . json {;compil: {//目標代碼:巴別編譯(esnext)，tsc編譯(: : umd esnext ，//ts嚴格模式;strict;:真，//jsx待遇:不保存;jsx;: 保存 ，//導入函數(shù)輔助;importh:為真。//模塊分析查找文件(節(jié)點) 模塊分辨率和尺寸后綴順序回顯3-@ q。q.com 節(jié)點 ，//跳過第三方庫的類型檢測，;skiplibcheck;: tru: true混合在模塊化方案中。 allowsyntheticd:為真，//是否生成映射文件;sourc:為真，//文件解析路徑為;bas: 。 ，//分辨率類型;typ:[ 網(wǎng)絡包-環(huán)境與環(huán)境]，//路徑別名(對應webpack配置);paths;: {;@/*;:[ src/* ]}，//基本類型庫;lib;:[ esnext ， dom ， 多姆。iterable ， scripthost ]}、;includ:[ src/* */*。ts ， src/* */*。tsx ， src/**/*。vue ， 測試/**/*。ts ， 測試/**/*。tsx ]，;exclud:[ 節(jié)點_模塊 ]} h，shims-vue.d.ts/* eslint-disable */* * 1。聲明。vue文件:導出的組件對象的類型。vue文件被定義為組件{}，{}，any * 2，.vue文件定義組件函數(shù):*-源代碼:函數(shù)定義組件(選項){返回選項} *-函數(shù):選項可以限制在type */declare module ;* .vue {從 amp導入類型{定義組件}；;vue const compon:定義組件{}，{}，anyexport默認組件} xxii。項目實戰(zhàn)細節(jié)1。獲取組件實例的類型父級。組件模板div son-component ref = soncomponentref /son-componentel-button @ click = 點擊處理程序 減去1個按鈕/el-button/div/template script lang = ts 從 amp導入{ definecomponent，ref };;vue 從導入son component ;。/son-component . vue ;導出默認的define component({ compon: { son component }，setup{ constsoncomponentref = reftype soncomponenttype = soncomponent的instance typetype constclichandler == {/* * 1、函數(shù)簽名以new關鍵字為前綴:*-var bankaccount: new= bank account；*那么bankaccount函數(shù)只能以new bankaccount的調用* 2和instancetype來獲取構造函數(shù)的實例類型:son組件的instance type*獲取子組件實例的類型*/const soncomponentinstanc: soncomponenttype = soncomponentref。值//3。組件實例中的屬性不是ref對象，而是代理對象。所以你不 不需要。值soncomponentstance。人。age-} return {soncomponentref，clickhandler} }})/script子組件template div { { person } }/div el-button @ click = 點擊處理程序 外加1個按鈕/el-button/templates criptlang = ts 從 vue 導出默認d。efinecomponent({ setup{ const person = ref({ name : ;黃婷婷 ，ag: 18 })const click handler == { person。value.age} return {person，clickhandler}})/script標記:
代碼文件
了解更多vue高級視頻教程(vue高級)相關內容請關注本站點。