Ê×Ò³ > ½Ì³Ì > Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ʱ¼ä£º2024-06-03¡¡|¡¡À´Ô´£º¡¡|¡¡ÔĶÁ£º82

»°Ì⣺ v ÏîÄ¿ VUE Ö÷Ò³ ¹¤×÷ E3

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³ Á㡢дÔÚ×îÇ° ÒÔÏÂÊÇÏîÄ¿Ïà¹ØµÄһЩÁ´½Ó£º Ô´´úÂëGitHub²Ö¿â£¨ÐèҪħ·¨ÉÏÍø£©£º²Ö¿â ÍøҳʾÀý£¨ÐèҪħ·¨ÉÏÍø£©£ºÍøҳʾÀý UIͼ£¨À´Ô´@Éè¼ÆʦÑîºØ£©£ºMasterGoÖ÷Ò³ ²¹³ä£ºÓÉÓÚʱ¼ä¹Øϵ£¬¸ÃÍøҳûÓÐÊÊÅäÊÖ»ú¶Ë£¬×î¼ÑչʾЧ¹ûΪÍøÒ³¶Ë1440p¿í¶È¡£ Èç¹ûÄã

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Á㡢дÔÚ×îÇ°

ÒÔÏÂÊÇÏîÄ¿Ïà¹ØµÄһЩÁ´½Ó£º

  • Ô´´úÂëGitHub²Ö¿â£¨ÐèҪħ·¨ÉÏÍø£©£º ²Ö¿â
  • ÍøҳʾÀý£¨ÐèҪħ·¨ÉÏÍø£©£º ÍøҳʾÀý
  • UIͼ£¨À´Ô´@Éè¼ÆʦÑîºØ£©£º MasterGoÖ÷Ò³

²¹³ä£ºÓÉÓÚʱ¼ä¹Øϵ£¬¸ÃÍøҳûÓÐÊÊÅäÊÖ»ú¶Ë£¬×î¼ÑչʾЧ¹ûΪÍøÒ³¶Ë1440p¿í¶È¡£


Èç¹ûÄãÏëÒªÔËÐÐÔ´´úÂ룺

  1. Ê×ÏÈÐèÒª±£Ö¤Äã±¾µØÓµÓÐVue.js»·¾³£¨¾ßÌå·½·¨ºÍ°æ±¾ºÅÏÂÎÄÓÐÌáµ½£©
  2. ½«Ô´´úÂë¿Ë¡µ½±¾µØ£¨µÃ±£Ö¤±¾µØÓÐGit»·¾³£©
cd your_path
git clone https://github.com/YellowSeaa/studio_page.git
  1. °²×°ÒÀÀµ
npm install
  1. ÔËÐÐÏîÄ¿
npm run dev

Ò»¡¢Ïë·¨

  • ×÷ÒµÒªÇó

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

  • Ïë×öÒ»¸ö¼òµ¥µÄ¹¤×÷ÊÒÖ÷Ò³Éè¼Æ£¨ÔÚMasterGoÉÏÕÒµ½¸öÄ£°å£©

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

¶þ¡¢¼¼ÊõջѡÓÃ

¿Î³Ì×÷ÒµÒªÇóҪʹÓÃHTML+CSS+JSP¼¼Êõ£¬ÔÚÍøÉÏÁ˽⵽JSPÄÚ¿ÉÒÔÌ×ÓÃVue£¨Ï൱ÓÚÓÃVueдģ°å£¬È»ºóÍâÃæÌ×Ò»²ãJSPÄ£°å¼´¿É£©¡£

×îÖÕ¾ö¶¨Ê¹ÓÃVueÀ´ÊµÏÖÇ°¶Ë£¬²¢ÇÒʹÓÃelement Plus½ÅÊּܣ¬ºó¶Ë²¿·Ö³¢ÊÔʹÓÃJSP£¨Ã»Ñ§¹ý£¬²»ÖªµÀÄܲ»ÄÜŪµÄÏÂÀ´£©£¬Èç¹ûʵÔÚ²»ÐоÍÓÃDjango×öÇ°ºó¶Ë·ÖÀ뿪·¢¡£

Êý¾Ý¿â·½ÃæµÄ»°£¬¾ÍÓÃMysql»òÕßsqlite3¡£

Èý¡¢ÏîÄ¿³õʼ»¯

1. °²×°Vue.jsºÍJSPºÍTomcat

ÓÉÓÚ֮ǰÒѾ­°²×°¹ýVue£¬ËùÒÔ²»¼Ç¼ÁË¡£

JSPºÍTomcat²Î¿¼µÄÊÇÏÂÃ漸ƪÎÄÕ£¬Ö±½ÓʹÓÃhomebrew°²×°µÄ£º

  1. homebrew°²×°Java
  2. homebrew°²×°Tomcat

ÖµµÃ×¢ÒâµÄÊÇÒÔÏÂÆô¶¯ Tomcat·½·¨

brew services start tomcat

Èç¹ûÖÕ¶ËÌáʾ Successfully started 'tomcat' (label: homebrew.mxcl.tomcat) Ôò˵Ã÷Æô¶¯³É¹¦£¬ä¯ÀÀÆ÷·ÃÎÊ http://localhost:8080 ¼´¿É¿´µ½ Tomcat µÄÒ³Ãæ¡£

2. »·¾³°æ±¾¼Ç¼

  1. Vue.js: @vue/cli 5.0.8
  2. npm: 10.5.0
  3. Java: openjdk 22.0.1 2024-04-16/ OpenJDK Runtime Environment Temurin-22.0.1+8 (build 22.0.1+8)/ OpenJDK 64-Bit Server VM Temurin-22.0.1+8 (build 22.0.1+8, mixed mode)

3. VueÏîÄ¿´´½¨

ʹÓÃÖնˣ¬½øÈëÏë´´½¨µÄÎļþ¼ÐλÖã¬È»ºóÔËÐÐÒÔÏÂÃüÁî

npm create vue@latest

È»ºó»áÈÃÎÒÊäÈëÏîÄ¿Ãû³ÆºÍ½øÐÐһЩѡÏÔÚ´ËÎÒֻѡÔñÁË ÒýÈë Vue Router ½øÐе¥Ò³ÃæÓ¦Óÿª·¢ £¬ÆäËûÑ¡Ïî¾ùÑ¡ÔñÁË·ñ¡£

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

×îºó¸ù¾ÝÌáʾ½øÈëÏîÄ¿Îļþ¼ÐÄÚ£¬°²×°ÒÀÀµ²¢ÔËÐм´¿É¡£

cd 
npm install #°²×°ÒÀÀµ
npm run dev #ÔËÐÐÏîÄ¿

ÔÚä¯ÀÀÆ÷Öдò¿ª¶ÔÓ¦ÍøÖ·¼´¿É

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ËÄ¡¢Ç°¶Ë¾²Ì¬²¿·Ö

1. ·ÓÉÉèÖÃ

±¾ÏîÄ¿ÊǼòµ¥µÄÏîÄ¿£¬Ö»ÓÐÒ»¸öÖ÷Ò³Ã棬ҳÃæÄÚÓÉÉϵ½ÏÂÅŲ¼¶à¸ö¿é¡£

ÎÒÃÇÖ»ÐèÒªÐÞ¸Ä src/App.vue ºÍ src/router/index.js ÖеÄÄÚÈÝ£¬½«Ò»¿ªÊ¼µÄÒ³ÃæÖ¸Ïò×Ô¶¨ÒåµÄÎļþ src/components/home.vue ¼´¿É£¬ÒÔÏÂÊǾßÌåÄÚÈÝ£º





// index.js
import { createRouter, createWebHistory } from 'vue-router'
import home from '../components/home.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
  ]
})

export default router


2. Ö÷Ò³µÄÅÅ°æ

¸ù¾ÝUIͼ¿ÉÒÔ¿´³ö£¬Ö÷Ò³ÊÇÓɶà¸ö²¿·Ö×é³É£¬ÓÉÉϵ½ÏÂÅŲ¼¡£

±¾ÏîÄ¿Öн«Ã¿¸ö²¿·Ö·Ö±ðд³ÉÒ»¸ö×é¼þÎļþ£¬È»ºóÔÚ home.vue Öм¯³É¡£

home.vue Ö»ÐèÒª¹Ø×¢×é¼þ²¿·Ö¼äµÄÅÅ°æ¼´¿É¡£

Ïȷֱ𴴽¨ºÃ¸÷¸ö×é¼þ¶ÔÓ¦µÄÎļþ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

È»ºóÐÞ¸Ä home.vue






×îÖյõ½Ð§¹ûÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

½ÓÏÂÀ´Ö»ÐèÒªÔÚ¶ÔÓ¦µÄ×é¼þÎļþÖУ¬Íê³ÉÇ°¶ËµÄ»æÖƼ´¿É¡£

3. ¶¥²¿²Ëµ¥À¸

Ê×ÏÈ¿´Ò»ÏÂUIͼ£¬²¼¾ÖÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ʹÓÃflex²¼¾Ö£¬ºìÉ«²¿·ÖʹÓà space-between £ºÁ½¶Ë¶ÔÆ룬ÏîÄ¿Ö®¼äµÄ¼ä¸ô¶¼ÏàµÈ£»À¶É«²¿·ÖʹÓà space-around £ºÃ¿¸öÏîÄ¿Á½²àµÄ¼ä¸ôÏàµÈ¡£

´úÂëÈçÏ£º




×îÖÕЧ¹û£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ºóÐø»¹ÐèÒª×ö£º

µã»÷±êÇ©¹ö¶¯µ½¶ÔӦλÖ㺠²Î¿¼ÎÄÕÂ

4. Í·Ìõ²¿·Ö

UIͼ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ÆäÖкìÉ«²¿·ÖʹÓÃflex·ÖΪ×óÓÒÁ½²¿·Ö£¬×ó±ßʹÓÃflex·ÖΪÉÏÏÂÈý²¿·Ö£¬ÓÒ±ßÔòÊÇÒ»ÕÅͼ¡£

´úÂëÈçÏ£º




×îÖÕЧ¹û£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

5. ¿é1

½ÓÏÂÀ´ÊÇÏÂÃæµÄÎå¸ö¿éÖеĵÚÒ»¸ö¡£UIͼÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

²¼¾ÖÈçͼËùʾ¡£

´úÂëÈçÏ£º




Ч¹ûÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

  • Óöµ½Ò»¸öÎÊÌ⣺²¼¾ÖµÄ¸ß¶È²»Êǹ̶¨µÄ£¨ÎÒÔÚcssÀïдÁ˹̶¨µÄÊýÖµ£©£¬»áËæ×Åä¯ÀÀÆ÷µÄËõ·Å¶ø¸Ä±ä¡£ÔÝδ½â¾ö¡£

6. ¿é2

UIͼÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

²¼¾ÖÓе㸴ÔÓ£¬ÆäÖÐÁ½¸öÀ¶É«²¿·Öͨ¹ýµ÷Õû²»Í¬µÄmargin-topÀ´ÊµÏÖ´íλµÄЧ¹û¡£

±³¾°µÄ¼¸¸ö¾ØÐβ»Ì«ºÃÖ±½Óͨ¹ý´úÂë»æÖÆ£¬Ö±½Óµ¼³öÒ»ÕÅͼƬ·ÅÔÚÈÝÆ÷±³¾°ÖС£

´úÂëÈçÏ£º




Ч¹ûÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ʵ¼ùÖз¢ÏÖ£¬Ê¹Óñ³¾°Í¼Æ¬À´ÊµÏÖÄÇЩ¾ØÐΣ¬ÓеãÄÑÒÔ¿ØÖÆ£¬Ð§¹û²»¼Ñ¡£×îÖÕÎÒ¼ò»¯ÁËһЩԪËØ£¬ÃãÇ¿ÄÜ¿´¡£

Èç¹ûÒª´ïµ½×îºÃµÄЧ¹û£¬»¹ÊǵÃͨ¹ý´úÂëʵÏÖ¾ØÐεĻæÖÆ¡£

7. ¿é3

UIͼ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ÕâÀïµÄ²¼¾Ö±È½Ï¼òµ¥£¬¾Í²»¹ý¶à׸ÊöÁË¡£

7.1 ÊÓƵ²¥·ÅÆ÷

±È½ÏÌرðµÄÊÇ´Ë´¦Ê¹ÓÃÁËÒ»¸öÊÓƵ²¥·ÅÆ÷£¬ µ«ÊÇÄ¿Ç°ÔÝʱûÓÐʵÏÖ£¬³öÏÖÁËһЩbug£ºµÚÈý·½µÄ²¥·ÅÆ÷²å¼þ°²×°ºóimportÏÔʾÕÒ²»µ½£¬´«Í³µÄvideo²¥·Å²»ÁË¡­¡­

ÏÈʹÓÃimg´úÌ棬ºóÐøÔÙÐÞÕâ¸öbug¡£

Ñ¡Óà vue3VideoPlay Õâ¸ö²å¼þ£¬ÖµµÃ×¢ÒâµÄÊÇ£¬Õâ¸ö²å¼þÓÐÒ»¸öÎÊÌ⣬ÆäĬÈÏpackage.jsonÖÐÓÐÒ»¸ö·¾¶ÊÇ´íµÄ£¬Òª¸Äд³ÉÏÂÃæÕâ¸ö£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ÁíÍ⣬¸Ã²å¼þ¹Ù·½µÄÎĵµÒ²ÓеãÎÊÌ⣬mp4Îļþ²»ÖªµÀΪʲô²¥·Å²»ÁË£¬±¾µØÎļþÒ²²¥·Å²»ÁË¡­¡­

¾­¹ý²âÊÔ£¬ÍøÂçm3u8Îļþ¿ÉÒÔ²¥·Å£¬ËùÒÔÏÂÃæʹÓô˸ñʽ½øÐв¥·Å¡££¨ÈçºÎ»ñµÃm3u8Á´½Ó£¬Ð´ÔÚÁ˲¹³ä²¿·Ö£©

´úÂ룺

  • template²¿·Ö£º
https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg" :src="options.src" :type="options.type" :autoPlay="false" />

´Ë´¦ÖµµÃ×¢ÒâµÄ²¿·ÖÊÇ£¬²¥·ÅÆ÷µÄ³¤ºÍ¿íµÃÏñ´úÂëµÄд·¨²ÅÓÐЧ£¬Ð´³ÉcssÎÞЧ£¬ÁíÍ⣬Բ½ÇÒ²Ö»ÄÜͨ¹ýÉèÖø¸ÈÝÆ÷ overflow: hidden; ʵÏÖ¡£

poster ²¿·ÖÊÇ·âÃæ¡£

  • script²¿·Ö£º

7.2 ²¼¾Ö´úÂë

´úÂ룺






Ч¹û£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

8. ¿é4

UIͼ£º Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ÕâÕÅͼÊÇÓж¯Ð§µÄ£¬ÖмäµÄÀ¶É«Ô²È¦¿ÉÒÔÑ¡Ôñ²»Í¬µÄÈËÎï½éÉÜ¡£
ÔÚ´ËÏÈ×öºÃ¾²Ì¬µÄÍâ¹Û£¬¶¯Ð§ºóÃæÔÙ²¹È«¡£

8.1 ¾²Ì¬²¼¾Ö

´úÂëÈçÏ£º




ÊÂʵÉÏ£¬ÕâÀïµÄͼƬºÍÑ¡Ïд·¨£¬¸´ÓÃÐԺܲ¶øÇÒ²»ºÃ×ö¶¯Ð§¡£ºóÃæ»áʹÓÃv-forµÈ·½·¨½øÐÐÐ޸ġ£

Ч¹ûÈçÏ£¨ÒòΪûÓÐÕÒµ½ºÏÊʵÄͼƬ£¬¾ÍËæ±ãÄÃÁËÒ»ÕÅͼƬ£©£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

9. ¿é5

UIÈçÏÂͼ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ÕâÒ»²¿·ÖµÄ²¼¾ÖºÍÉÏÃæµÄÓÐÐí¶à²»Í¬£¬ÓÐÒ»²¿·ÖµÄ²¼¾Ö²»ÄÜʹÓÃflexʵÏÖ£¬µÃÓÃÏà¶ÔºÍ¾ø¶ÔλÖà relative ¡¢ absolute À´ÊµÏÖÖصþ£¬ÈçͼÖеĺìÉ«¡¢ÓұߵÄÂÌÉ«²¿·Ö¡£

¾ßÌå´úÂëÈçÏ£º




Ч¹ûÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

10. µ×²¿

UIÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

²¼¾Ö±È½Ï¼òµ¥£¬¾Í²»¹ý¶à׸Êö¡£

´úÂëÈçÏ£º




Ч¹û£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

11. ²¹³ä

11.1 ¾ØÐλæÖÆ

Ç°Ãæд¾²Ì¬Ò³µÄʱºò£¬ÓÐÒ»²¿·Ö±³¾°Í¼ÐÎÊÇÖ±½ÓʹÓÃͼƬ£¬µ«ÊÇÀ­ÉìЧ¹û²»ºÃ£¬ËùÒÔ²¹³äʹÓÃdivÀ´»­¾ØÐΣ¬ÒÔÊÊÓ¦²»Í¬¿í¶ÈµÄä¯ÀÀÆ÷¡£

Ê×ÏÈÊÇheadlineµÄÕâÁ½¸ö¾ØÐΣº

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ÔÚright_partÖмÓÉÏÁ½¸ödiv£¬²¢ÓÃÏà¶ÔλÖú;ø¶ÔλÖù̶¨¡£

// template
//style .right_part { min-width: 817px; height: 100%; overflow: auto; position: relative; /* background-color: red; */ } .right_part img { height: 512px; width: 754px; /* min-width: 754px; */ border-radius: 0px 0px 0px 200px; position: absolute; top: 0px; right: 0px; /* margin-left: 64.5px; margin-bottom: 89px; */ } .rectangle1{ position: absolute; top: 0px; left: 0px; width: 129px; height: 129px; background: #DAE9FF; border-radius: 500px 500px 500px 500px; } .rectangle2{ position: absolute; bottom: 0px; right: 120px; width: 178px; height: 178px; background: #FFF5DB; border-radius: 0px 0px 100px 0px; }

11.2 »ñµÃm3u8Á´½Ó

ÉÏÃæÌáµ½¹ý£¬ÄǸöÊÓƵ²¥·Å²å¼þÎÞ·¨²¥·Å±¾µØÊÓƵ£¬ËùÒÔÐèÒª½«ÊÓƵÉÏ´«µ½ÍøÂçÉÏ£¬Í¨¹ýÍøÂçÁ´½Ó»ñÈ¡¡£

ÔÚ´ËʹÓð¢ÀïÔƵÄýÌå´¦ÀíMPSºÍ¶ÔÏó´æ´¢OSSʵÏÖ¡£

  • ýÌå´¦ÀíMPS

  • ¶ÔÏó´æ´¢

  1. н¨Ã½ÌåBucket

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

  1. н¨¹¤×÷Á÷

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

  1. ÉÏ´«ÊÓƵ²¢·¢²¼

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

  1. »ñÈ¡Á´½Ó

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

  1. OSSÊÚȨ£¨²»²Ù×÷µÄ»°£¬Á´½Ó»áÌáʾûȨÏÞ£©

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

11.3 ÏÞÖÆ×î´ó¿í¶È

֮ǰÔÚ²¼¾Öʱ£¬¶àʹÓÃflex²¼¾Ö£¬¿ÉÒÔ¸ù¾Ýä¯ÀÀÆ÷¿í¶È×ÔÊÊÓ¦²¼¾Ö£¬ÔÚÒ»¶¨µÄ¿í¶ÈÏÞÖÆÄÚЧ¹û»¹²»´í£¬µ«ÊÇÈç¹û¿í¶ÈÌ«´ó£¬»áµ¼ÖÂ×óÓÒÁ½±ßµÄ×é¼þÖ®¼äÓÐÒ»¸ö¾Þ´óµÄ¿Õ°×£¬ºÜÄÑ¿´£¬ËùÒÔÐèÒªÏÞÖÆÒ»¸ö×î´óµÄ¿í¶È£¬µ±³¬³öÕâ¸ö¿í¶Èʱ£¬ÔÚÁ½±ßʹÓÿհ×Ìî³ä¡£

Ö»ÐèÒªÔÚ home.vue µÄ style ²¿·ÖÌí¼ÓÏÂÃæ´úÂë¡£

max-width: 1440px;
/* ÉèÖÃ×î´ó¿í¶È */
margin-left: auto;
/* ×ó²à×Ô¶¯Ìî³ä */
margin-right: auto;
/* ÓÒ²à×Ô¶¯Ìî³ä */

Ч¹ûÈçÏ£º

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

11.4 ´ò¿ªÒ³ÃæĬÈÏÔÚ¶¥²¿

ÊÓƵ²¥·ÅÆ÷ÓÐÒ»¸öbug£ºÔÚÒ»¿ªÊ¼´ò¿ªÒ³ÃæµÄʱºò£¬»á¿ªÊ¼»º³å£¬»º³åʱĬÈÏ°ÑÒ³Ãæ¹ö¶¯µ½²¥·ÅÆ÷ËùÔÚµÄλÖá£

µ«ÊÇÎÒÃÇÏëÒª´ò¿ªÊ±Ä¬ÈÏÔÚ¶¥²¿¡£

ÊÔ¹ýʹÓà mounted ¹³×Óº¯ÊýÇ¿Öƹö¶¯µ½¶¥²¿£¬µ«ÊÇ»º³åÔں󣬽á¹ûÊDz»ÉúЧ¡£

ÈÏÕæ²é¿´ÁËÊÓƵ²¥·ÅÆ÷µÄÎĵµºó£¬·¢ÏÖͨ¹ý°ó¶¨Ê¼þ£¬ÔÚ»º³å¿ªÊ¼Ê±¹ö¶¯µ½¶¥²¿£¬¿ÉÒÔÇúÏ߾ȹú¡£

const onloadstart = (ev) => {
  console.log("¿ªÊ¼»º³å");
  window.scroll(0, 0);
};

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Îå¡¢ÐÞ¸ÄÄÚÈÝ

1. ÍøÒ³ÄÚµÄÄÚÈÝ

ÒÔÉÏ£¬Ç°¶Ë¾²Ì¬²¿·ÖµÄËùÓв¼¾Ö¶¼»­ºÃÁË£¬½ÓÏÂÀ´Òª¸ù¾Ýʵ¼ÊÇé¿ö½«ÄÚÈÝÐ޸ijÉÎÒÃÇ×Ô¼ºµÄ¡£

ÔÚÕâÀÎÒÏëÒª×öµÄÊÇÎÒÃÇ¿ª·¢µÄÒ»¿îappµÄ½éÉÜ£¬ËùÒÔ½«Ò³Ãæ¸Ä³ÉÁËÒÔÏ¡££¨ÓÉÓÚÖ»ÐèÒªÐÞ¸ÄÄÚÈÝ£¬ËùÒÔ´úÂë¾Í²»Õ¹Ê¾ÁË£©

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

2. ÍøÒ³±êÌâÓëͼ±ê

  1. ½«ÎÒÃÇÏëÓõÄͼ±êÌæ»»µô public/favicon.ico

  2. Ð޸ĸùĿ¼Ï嵀 index.html Îļþ£º



  
    
     
    
    �Ծ�������רע��Ч��ѧϰ���� 
  
  
    
  1. ˢ�¼��ɿ����޸ijɹ���

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

������̬����

1. ������

1.1 �̶��ڶ���

����ϸ��ϲ����Ƕ�̬���֣�����ֱ��ͨ��css��������ʵ�֣�ֻ������ǰ���������ˣ����ڴ˲����ϡ�

  1. home.vue �ļ������ò���






  1. TopBar.vue ����css
.bar {
    display: flex;
    justify-content: space-between;
  	/* marginҪ�ij�padding */
    padding-top: 42px;
    padding-left: 120px; 
    padding-right: 120px;
    padding-bottom: 10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* ���ϵײ���Ӱ�ÿ�һЩ*/
    /* margin-top: 42px;
    margin-left: 120px;
    margin-right: 120px; */
}

1.2 �����תָ��λ��

���ڸ�������ĸ߶��ǹ̶�����ģ�����ֱ��ʹ�� document.documentElement.scrollTop ����ʵ�֡�

  1. ���庯��

  1. ����ǩ�󶨺���

2. ������ť

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

��������ť���������½�����ťֻ��Ҫ��һ���������Ӽ��ɣ��������ӿ���ʹ�ð�����oss����ȡ�����巽����֮ǰ��Ƶm3u8���ӻ�ȡ��࣬�Ͳ�����׸����

���ύ����ť��Ҫ��һ�����ݿ�����Ľӿڣ���������е����ݼ��뵽���ݿ��С�

����Ŀǰû�п������صĶ��������ݿ�����Ľӿڣ����Ծͼ򵥰���һ������������Ϣ�򡣴���Ͳ�չʾ�ˡ�

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

3. ��Ա����

��Ա���ܲ��֣���Ҫ�������Ե�������ѡ��ť���л�����Ӧ�ij�Ա��Ϣȥ��

template ���֣�

Member Avatar

{{ selectedMember.name }}

{{ selectedMember.description }}

script ���֣�


�ߡ�����github��

���ϣ�webҳ�������ɣ����������ǽ��䲿��GitHub�ϡ�

�ο��̳̣� �ο�

  1. ���½�һ��github�ֿ⣬������ô�����Ͳ���ϸ����
  2. �������ϴ����ֿ��С�
  3. �޸������ļ�

����Ŀ�е� vite.config.js ���ҵ��������飬����Ϊ��Ӧ�� github �ֿ�����

export default defineConfig({
    base: '/your_repositories_name/', // github�ֿ�����
    plugins: [],
})
  1. ����vue����
npm run build
  1. �������Ĵ����ϴ����ֿ���

��Ҫ�� .gitignore �ļ��н�dist�ļ��еĺ��Ը�ע�͵���

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

Ȼ����git�����ļ����ϴ���ָ����֧��

git add dist
git commit -m "Your commit message"
git subtree split --prefix dist -b dist-branch
git push your_repositories_name dist-branch:gh-pages # ����Ҫ�ijɾ���IJֿ���
git branch -d dist-branch

����ڲֿ�������д�github page���ɡ�

Vue3¼òµ¥ÏîÄ¿Á÷³Ì·ÖÏí¡ª¡ª¹¤×÷ÊÒÖ÷Ò³

ÏîÄ¿1.0.2.24
��Ŀ1.0.2.24
��ʽ��Ӫ ï¿½ï¿½È«ï¿½Þ¹ï¿½ï¿½
��(0)  03.16 ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½
�Ƽ�

���º�������

����

���η��ư�

����

��Ѷ�Ķ�

����


��ICP��2022002427��-10 �湫��������43070202000427��
© 2013~2024 haote.com ������