锟斤拷站锟斤拷锟斤拷

锟斤拷锟斤拷位锟矫ｏ拷锟斤拷页 > 锟斤拷锟斤拷锟教筹拷 > 锟教筹拷 > Vue3锟斤拷锟斤拷目锟斤拷锟教凤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷页

Vue3锟斤拷锟斤拷目锟斤拷锟教凤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷页

锟斤拷源锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷|锟斤拷时锟戒：2024-06-03 15:34:31 |锟斤拷锟侥讹拷锟斤拷166锟斤拷|锟斤拷 锟斤拷签锟斤拷 v 锟斤拷目 VUE 锟斤拷页 锟斤拷锟斤拷 E3 锟斤拷 |锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷

锟斤拷锟斤拷锟斤拷戏

Vue3锟斤拷锟斤拷目锟斤拷锟教凤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷页 锟姐、写锟斤拷锟斤拷前 锟斤拷锟斤拷锟斤拷锟斤拷目锟斤拷氐锟揭恍╋拷锟斤拷樱锟� 源锟斤拷锟斤拷GitHub锟街库（锟斤拷要魔锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟街匡拷 锟斤拷页示锟斤拷锟斤拷锟斤拷要魔锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷页示锟斤拷 UI图锟斤拷锟斤拷源@锟斤拷锟绞︼拷锟截ｏ拷锟斤拷MasterGo锟斤拷页 锟斤拷锟戒：锟斤拷锟斤拷时锟斤拷锟较碉拷锟斤拷锟斤拷锟揭趁伙拷锟斤拷锟斤拷锟斤拷只锟斤拷耍锟斤拷锟斤拷展示效锟斤拷为锟斤拷页锟斤拷1440p锟斤拷锟饺★拷 锟斤拷锟斤拷锟�

Vue3锟斤拷锟斤拷目锟斤拷锟教凤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷页

锟姐、写锟斤拷锟斤拷前

锟斤拷锟斤拷锟斤拷锟斤拷目锟斤拷氐锟揭恍╋拷锟斤拷樱锟�

  • 源锟斤拷锟斤拷GitHub锟街库（锟斤拷要魔锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷 锟街匡拷
  • 锟斤拷页示锟斤拷锟斤拷锟斤拷要魔锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷 锟斤拷页示锟斤拷
  • UI图锟斤拷锟斤拷源@锟斤拷锟绞︼拷锟截ｏ拷锟斤拷 MasterGo锟斤拷页

锟斤拷锟戒：锟斤拷锟斤拷时锟斤拷锟较碉拷锟斤拷锟斤拷锟揭趁伙拷锟斤拷锟斤拷锟斤拷只锟斤拷耍锟斤拷锟斤拷展示效锟斤拷为锟斤拷页锟斤拷1440p锟斤拷锟饺★拷

锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷锟皆达拷锟斤拷耄�

  1. 锟斤拷锟斤拷锟斤拷要锟斤拷证锟姐本锟斤拷拥锟斤拷Vue.js锟斤拷锟斤拷锟斤拷锟斤拷锟藉方锟斤拷锟酵版本锟斤拷锟斤拷锟斤拷锟斤拷锟结到锟斤拷
  2. 锟斤拷源锟斤拷锟斤拷锟铰★拷锟斤拷锟斤拷兀锟斤拷帽锟街わ拷锟斤拷锟斤拷锟紾it锟斤拷锟斤拷锟斤拷 
cd your_path
git clone https://github.com/YellowSeaa/studio_page.git
  1. 锟斤拷装锟斤拷锟斤拷 
npm install
  1. 锟斤拷锟斤拷锟斤拷目 
npm run dev

一锟斤拷锟诫法

  • 锟斤拷业要锟斤拷

Vue3简单项目流程分享——工作室主页

  • 锟斤拷锟斤拷一锟斤拷锟津单的癸拷锟斤拷锟斤拷锟斤拷页锟斤拷疲锟斤拷锟組asterGo锟斤拷锟揭碉拷锟斤拷模锟藉）

Vue3简单项目流程分享——工作室主页

锟斤拷锟斤拷锟斤拷锟斤拷栈选锟斤拷

锟轿筹拷锟斤拷业要锟斤拷要使锟斤拷HTML+CSS+JSP锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟剿解到JSP锟节匡拷锟斤拷锟斤拷锟斤拷Vue锟斤拷锟洁当锟斤拷锟斤拷Vue写模锟藉，然锟斤拷锟斤拷锟斤拷锟斤拷一锟斤拷JSP模锟藉即锟缴ｏ拷锟斤拷

锟斤拷锟秸撅拷锟斤拷使锟斤拷Vue锟斤拷实锟斤拷前锟剿ｏ拷锟斤拷锟斤拷使锟斤拷element Plus锟斤拷锟街架ｏ拷锟斤拷瞬锟斤拷殖锟斤拷锟绞癸拷锟絁SP锟斤拷没学锟斤拷锟斤拷锟斤拷知锟斤拷锟杰诧拷锟斤拷弄锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟绞碉拷诓锟斤拷芯锟斤拷锟紻jango锟斤拷前锟斤拷朔锟斤拷肟拷锟斤拷锟�

锟斤拷锟捷库方锟斤拷幕锟斤拷锟斤拷锟斤拷锟組ysql锟斤拷锟斤拷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锟斤拷为锟斤拷锟斤拷锟斤拷锟斤拷锟街ｏ拷锟斤拷锟绞癸拷锟絝lex锟斤拷为锟斤拷锟斤拷锟斤拷锟斤拷锟街ｏ拷锟揭憋拷锟斤拷锟斤拷一锟斤拷图锟斤拷

锟斤拷锟斤拷锟斤拷锟铰ｏ拷

锟斤拷锟斤拷效锟斤拷锟斤拷

Vue3简单项目流程分享——工作室主页

5. 锟斤拷1

锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟叫的碉拷一锟斤拷锟斤拷UI图锟斤拷锟铰ｏ拷

Vue3简单项目流程分享——工作室主页

锟斤拷锟斤拷锟斤拷图锟斤拷示锟斤拷

锟斤拷锟斤拷锟斤拷锟铰ｏ拷

效锟斤拷锟斤拷锟铰ｏ拷

Vue3简单项目流程分享——工作室主页

  • 锟斤拷锟斤拷一锟斤拷锟斤拷锟解：锟斤拷锟街的高度诧拷锟角固讹拷锟侥ｏ拷锟斤拷锟斤拷css锟斤拷写锟剿固讹拷锟斤拷锟斤拷值锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷哦锟斤拷谋洹ｏ拷锟轿达拷锟斤拷锟斤拷

6. 锟斤拷2

UI图锟斤拷锟铰ｏ拷

Vue3简单项目流程分享——工作室主页

锟斤拷锟斤拷锟叫点复锟接ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷色锟斤拷锟斤拷通锟斤拷锟斤拷锟斤拷锟斤拷同锟斤拷margin-top锟斤拷实锟街达拷位锟斤拷效锟斤拷锟斤拷

锟斤拷锟斤拷锟侥硷拷锟斤拷锟斤拷锟轿诧拷太锟斤拷直锟斤拷通锟斤拷锟斤拷锟斤拷锟斤拷疲锟街憋拷拥锟斤拷锟揭伙拷锟酵计拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷小锟�

锟斤拷锟斤拷锟斤拷锟铰ｏ拷

效锟斤拷锟斤拷锟铰ｏ拷

Vue3简单项目流程分享——工作室主页

实锟斤拷锟叫凤拷锟街ｏ拷使锟矫憋拷锟斤拷图片锟斤拷实锟斤拷锟斤拷些锟斤拷锟轿ｏ拷锟叫碉拷锟斤拷锟皆匡拷锟狡ｏ拷效锟斤拷锟斤拷锟窖★拷锟斤拷锟斤拷锟揭硷拷锟斤拷一些元锟截ｏ拷锟斤拷强锟杰匡拷锟斤拷

锟斤拷锟揭拷锏斤拷锟矫碉拷效锟斤拷锟斤拷锟斤拷锟角碉拷通锟斤拷锟斤拷锟斤拷实锟街撅拷锟轿的伙拷锟狡★拷

7. 锟斤拷3

UI图锟斤拷

Vue3简单项目流程分享——工作室主页

锟斤拷锟斤拷牟锟斤拷直冉霞虻ィ锟斤拷筒锟斤拷锟斤拷锟阶革拷锟斤拷恕锟�

7.1 锟斤拷频锟斤拷锟斤拷锟斤拷

锟饺斤拷锟截憋拷锟斤拷谴舜锟绞癸拷锟斤拷锟揭伙拷锟斤拷锟狡碉拷锟斤拷锟斤拷锟斤拷锟� 锟斤拷锟斤拷目前锟斤拷时没锟斤拷实锟街ｏ拷锟斤拷锟斤拷锟斤拷一些bug锟斤拷锟斤拷锟斤拷锟斤拷锟侥诧拷锟斤拷锟斤拷锟斤拷锟斤拷锟阶帮拷锟絠mport锟斤拷示锟揭诧拷锟斤拷锟斤拷锟斤拷统锟斤拷video锟斤拷锟脚诧拷锟剿★拷锟斤拷

锟斤拷使锟斤拷img锟斤拷锟芥，锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟絙ug锟斤拷

选锟斤拷 vue3VideoPlay 锟斤拷锟斤拷锟斤拷锟斤拷值锟斤拷注锟斤拷锟斤拷牵锟斤拷锟斤拷锟斤拷锟斤拷锟揭伙拷锟斤拷锟斤拷猓拷锟侥拷锟絧ackage.json锟斤拷锟斤拷一锟斤拷路锟斤拷锟角达拷锟侥ｏ拷要锟斤拷写锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟�

Vue3简单项目流程分享——工作室主页

锟斤拷锟解，锟矫诧拷锟斤拷俜锟斤拷锟斤拷牡锟揭诧拷械锟斤拷锟斤拷猓琺p4锟侥硷拷锟斤拷知锟斤拷为什么锟斤拷锟脚诧拷锟剿ｏ拷锟斤拷锟斤拷锟侥硷拷也锟斤拷锟脚诧拷锟剿★拷锟斤拷

锟斤拷锟斤拷锟斤拷锟皆ｏ拷锟斤拷锟斤拷m3u8锟侥硷拷锟斤拷锟皆诧拷锟脚ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷使锟矫此革拷式锟斤拷锟叫诧拷锟脚★拷锟斤拷锟斤拷位锟斤拷m3u8锟斤拷锟接ｏ拷写锟斤拷锟剿诧拷锟戒部锟街ｏ拷

锟斤拷锟诫：

  • template锟斤拷锟街ｏ拷 

    
    https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg" :src="options.src"
        :type="options.type" :autoPlay="false" />

锟剿达拷值锟斤拷注锟斤拷牟锟斤拷锟斤拷牵锟斤拷锟斤拷锟斤拷锟斤拷某锟斤拷涂锟斤拷锟斤拷锟斤拷锟斤拷锟叫达拷锟斤拷锟斤拷锟叫э拷锟叫达拷锟絚ss锟斤拷效锟斤拷锟斤拷锟解，圆锟斤拷也只锟斤拷通锟斤拷锟斤拷锟矫革拷锟斤拷锟斤拷 overflow: hidden; 实锟街★拷

poster 锟斤拷锟斤拷锟角凤拷锟芥。

  • script锟斤拷锟街ｏ拷

7.2 锟斤拷锟街达拷锟斤拷

锟斤拷锟诫：

效锟斤拷锟斤拷

Vue3简单项目流程分享——工作室主页

8. 锟斤拷4

UI图锟斤拷 Vue3简单项目流程分享——工作室主页

锟斤拷锟斤拷图锟斤拷锟叫讹拷效锟侥ｏ拷锟叫硷拷锟斤拷锟缴踩︼拷锟斤拷锟窖★拷锟酵拷锟斤拷锟斤拷锟斤拷锟杰★拷
锟节达拷锟斤拷锟斤拷锟矫撅拷态锟斤拷锟斤拷郏锟斤拷锟叫э拷锟斤拷锟斤拷俨锟饺拷锟�

8.1 锟斤拷态锟斤拷锟斤拷

锟斤拷锟斤拷锟斤拷锟铰ｏ拷

锟斤拷实锟较ｏ拷锟斤拷锟斤拷锟酵计拷锟窖★拷疃夹达拷锟斤拷锟斤拷锟斤拷锟斤拷院懿睿拷锟斤拷也锟斤拷锟斤拷锟斤拷锟叫э拷锟斤拷锟斤拷锟斤拷使锟斤拷v-for锟饺凤拷锟斤拷锟斤拷锟斤拷锟睫改★拷

效锟斤拷锟斤拷锟铰ｏ拷锟斤拷为没锟斤拷锟揭碉拷锟斤拷锟绞碉拷图片锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟揭伙拷锟酵计拷锟斤拷锟�

Vue3简单项目流程分享——工作室主页

9. 锟斤拷5

UI锟斤拷锟斤拷图锟斤拷

Vue3简单项目流程分享——工作室主页

锟斤拷一锟斤拷锟街的诧拷锟街猴拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷嗖煌拷锟斤拷锟揭伙拷锟斤拷值牟锟斤拷植锟斤拷锟绞癸拷锟絝lex实锟街ｏ拷锟斤拷锟斤拷锟斤拷院途锟斤拷锟轿伙拷锟� relative 锟斤拷 absolute 锟斤拷实锟斤拷锟截碉拷锟斤拷锟斤拷图锟叫的猴拷色锟斤拷锟揭边碉拷锟斤拷色锟斤拷锟街★拷

锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷拢锟�

效锟斤拷锟斤拷锟铰ｏ拷

Vue3简单项目流程分享——工作室主页

10. 锟阶诧拷

UI锟斤拷锟铰ｏ拷

Vue3简单项目流程分享——工作室主页

锟斤拷锟街比较简单ｏ拷锟酵诧拷锟斤拷锟斤拷赘锟斤拷锟斤拷

锟斤拷锟斤拷锟斤拷锟铰ｏ拷

效锟斤拷锟斤拷

Vue3简单项目流程分享——工作室主页

11. 锟斤拷锟斤拷

11.1 锟斤拷锟轿伙拷锟斤拷

前锟斤拷写锟斤拷态页锟斤拷时锟斤拷锟斤拷一锟斤拷锟街憋拷锟斤拷图锟斤拷锟斤拷直锟斤拷使锟斤拷图片锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷效锟斤拷锟斤拷锟矫ｏ拷锟斤拷锟皆诧拷锟斤拷使锟斤拷div锟斤拷锟斤拷锟斤拷锟轿ｏ拷锟斤拷锟斤拷应锟斤拷同锟斤拷锟饺碉拷锟斤拷锟斤拷锟斤拷锟�

锟斤拷锟斤拷锟斤拷headline锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟轿ｏ拷

Vue3简单项目流程分享——工作室主页

锟斤拷right_part锟叫硷拷锟斤拷锟斤拷锟斤拷div锟斤拷锟斤拷锟斤拷锟斤拷锟轿伙拷煤途锟斤拷锟轿伙拷霉潭锟斤拷锟� 

// template


    

    

    Vue3简单项目流程分享——工作室主页



//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 锟斤拷锟絤3u8锟斤拷锟斤拷

锟斤拷锟斤拷锟结到锟斤拷锟斤拷锟角革拷锟斤拷频锟斤拷锟脚诧拷锟斤拷薹锟斤拷锟斤拷疟锟斤拷锟斤拷锟狡碉拷锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷锟狡碉拷洗锟斤拷锟斤拷锟斤拷锟斤拷希锟酵拷锟斤拷锟斤拷锟斤拷锟斤拷踊锟饺★拷锟�

锟节达拷使锟矫帮拷锟斤拷锟狡碉拷媒锟藉处锟斤拷MPS锟酵讹拷锟斤拷娲SS实锟街★拷

  • 媒锟藉处锟斤拷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 锟斤拷锟接猴拷锟斤拷强锟狡癸拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟角伙拷锟斤拷锟节后，斤拷锟斤拷遣锟斤拷锟叫э拷锟�

锟斤拷锟斤拷榭达拷锟斤拷锟狡碉拷锟斤拷锟斤拷锟斤拷锟斤拷牡锟斤拷螅锟斤拷锟酵拷锟斤拷锟斤拷录锟斤拷锟斤拷诨锟斤拷蹇际憋拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷呔裙锟斤拷锟� 

const onloadstart = (ev) => {
  console.log("锟斤拷始锟斤拷锟斤拷");
  window.scroll(0, 0);
};

Vue3简单项目流程分享——工作室主页

锟藉、锟睫革拷锟斤拷锟斤拷

1. 锟斤拷页锟节碉拷锟斤拷锟斤拷

锟斤拷锟较ｏ拷前锟剿撅拷态锟斤拷锟街碉拷锟斤拷锟叫诧拷锟街讹拷锟斤拷锟斤拷锟剿ｏ拷锟斤拷锟斤拷锟斤拷要锟斤拷锟斤拷实锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷薷某锟斤拷锟斤拷锟斤拷约锟斤拷摹锟�

锟斤拷锟斤拷锟斤，锟斤拷锟斤拷要锟斤拷锟斤拷锟斤拷锟斤拷锟角匡拷锟斤拷锟斤拷一锟斤拷app锟侥斤拷锟杰ｏ拷锟斤拷锟皆斤拷页锟斤拷某锟斤拷锟斤拷锟斤拷隆锟斤拷锟斤拷锟斤拷锟街伙拷锟揭拷薷锟斤拷锟斤拷荩锟斤拷锟斤拷源锟斤拷锟酵诧拷展示锟剿ｏ拷

Vue3简单项目流程分享——工作室主页

Vue3简单项目流程分享——工作室主页

Vue3简单项目流程分享——工作室主页

Vue3简单项目流程分享——工作室主页

2. 锟斤拷页锟斤拷锟斤拷锟斤拷图锟斤拷

  1. 锟斤拷锟斤拷锟斤拷锟斤拷锟矫碉拷图锟斤拷锟芥换锟斤拷 public/favicon.ico

  2. 锟睫改革拷目录锟铰碉拷 index.html 锟侥硷拷锟斤拷 



  
    
     
    
    锟皆撅拷锟斤拷锟斤拷锟斤拷专注锟斤拷效锟斤拷学习锟斤拷锟斤拷
  1. 刷锟铰硷拷锟缴匡拷锟斤拷锟睫改成癸拷锟斤拷

Vue3简单项目流程分享——工作室主页

锟斤拷锟斤拷锟斤拷态锟斤拷锟斤拷

1. 锟斤拷锟斤拷锟斤拷

1.1 锟教讹拷锟节讹拷锟斤拷

锟斤拷锟斤拷细锟斤拷喜锟斤拷锟斤拷嵌锟教拷锟斤拷郑锟斤拷锟斤拷锟街憋拷锟酵拷锟絚ss锟斤拷锟斤拷锟斤拷锟斤拷实锟街ｏ拷只锟斤拷锟斤拷锟斤拷前锟斤拷锟斤拷锟斤拷锟斤拷锟剿ｏ拷锟斤拷锟节此诧拷锟斤拷锟较★拷

  1. home.vue 锟侥硷拷锟斤拷锟斤拷锟矫诧拷锟斤拷
  1. TopBar.vue 锟斤拷锟斤拷css 
.bar {
    display: flex;
    justify-content: space-between;
  	/* margin要锟侥筹拷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. 锟斤拷员锟斤拷锟斤拷

锟斤拷员锟斤拷锟杰诧拷锟街ｏ拷锟斤拷要锟斤拷锟斤拷锟斤拷锟皆碉拷锟斤拷锟斤拷锟斤拷选锟斤拷钮锟斤拷锟叫伙拷锟斤拷锟斤拷应锟侥筹拷员锟斤拷息去锟斤拷

template 锟斤拷锟街ｏ拷 


  Vue3简单项目流程分享——工作室主页
  

      
{{ 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 # 锟斤拷锟斤拷要锟侥成撅拷锟斤拷牟挚锟斤拷锟�
git branch -d dist-branch

锟斤拷锟斤拷诓挚锟斤拷锟斤拷锟斤拷锟叫达拷github page锟斤拷锟缴★拷

Vue3简单项目流程分享——工作室主页

小锟斤拷锟狡硷拷锟侥讹拷

锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟侥斤拷为锟斤拷锟斤拷锟斤拷息锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷同锟斤拷锟睫观碉拷锟街な碉拷锟斤拷锟斤拷锟斤拷锟�

项目 1.0.2.24
锟斤拷目 1.0.2.24
锟斤拷锟酵ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷营状态锟斤拷锟斤拷式锟斤拷营锟斤拷锟斤拷锟斤拷锟皆ｏ拷 英锟斤拷 锟斤拷锟斤拷

锟斤拷戏锟斤拷锟斤拷

锟斤拷戏锟斤拷锟�

锟斤拷戏锟斤拷频

锟斤拷戏锟斤拷锟斤拷

锟斤拷戏锟筋动
锟斤拷锟斤拷目锟斤拷锟斤拷.projekt锟斤拷锟斤拷锟斤拷戏锟斤拷StampedeGames锟斤拷锟斤拷锟斤拷一锟斤拷锟斤拷锟酵硷拷约锟斤拷锟斤拷锟斤拷戏锟斤拷.projekt要锟斤拷锟斤拷锟皆诧拷同锟侥凤拷式锟斤拷

锟斤拷锟斤拷锟斤拷锟斤拷

锟斤拷锟斤拷锟狡碉拷锟斤拷锟�

锟斤拷锟斤拷

同锟斤拷锟斤拷锟斤拷

锟斤拷锟斤拷

锟斤拷锟斤拷锟斤拷讯

锟斤拷锟斤拷

  • 锟斤拷戏锟狡硷拷
  • 锟斤拷匕姹�

锟斤拷锟斤拷
  • 锟斤拷讯
  • 锟斤拷频

锟斤拷锟斤拷
  • 锟斤拷卓锟饺帮拷
  • 苹锟斤拷锟饺帮拷

锟斤拷锟节猴拷锟斤拷锟斤拷锟斤拷系锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟�锟斤拷锟斤拷站锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟狡硷拷锟斤拷锟斤拷

频锟斤拷 锟斤拷锟斤拷频锟斤拷锟斤拷锟斤拷锟斤拷专锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷卓锟斤拷锟斤拷锟�锟斤拷app锟斤拷锟斤拷

锟狡硷拷 锟斤拷原锟斤拷锟斤拷锟斤拷锟斤拷锟铰帮拷锟斤拷锟斤拷锟斤拷锟杰匡拷锟斤拷锟斤拷锟截诧拷锟斤拷

锟斤拷锟斤拷 锟斤拷锟斤拷色锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷 锟斤拷锟斤拷锟�锟斤拷锟斤拷战锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷

扫锟斤拷维锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟街伙拷锟芥本锟斤拷

扫锟斤拷维锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟脚癸拷锟节号ｏ拷

锟斤拷站锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟较达拷锟斤拷锟斤拷锟斤拷锟街凤拷锟斤拷陌锟饺拷锟斤拷敕拷始锟�[email protected]

锟斤拷ICP锟斤拷2022002427锟斤拷-10 锟芥公锟斤拷锟斤拷锟斤拷锟斤拷43070202000427锟斤拷© 2013~2025 haote.com 锟斤拷锟斤拷锟斤拷