vue3初始项目结构与分析
简介
时隔多年再次学习vue，单纯学习刚创立好的项目分析其结构与运作方式，掌握了基础才能在工作中延申
环境：
nvm: v1.1.12
node.js: v18.20.5
npm: v10.8.2
vue: 3
visual studio code：v1.95.2
正文
下图抛开HelloVue.vue就是一个刚建立好的初始vue3项目。
先简单说下重要文件夹的作用，了解这些概念有助于帮助我们在真实研发中正确的放置和设计编写
一、components
该文件夹是"组件"文件夹，用于存放定义的组件，而其下的 "icons" 文件夹是组件的分类文件夹，分类文件夹通常用于存放相同特性的vue文件或子组件
二、router
router文件夹用于存放路由文件
三、views
views文件夹用户存放主要的页面，通常是路由的跳转页面。
执行流程
项目启动时，会加载根目录的index.html，该html做了两件事
1、定义了应用实例挂在的 id="app"的div容器
<div id="app"></div>2、script标签引用了src目录下的main.js
<script type="module" src="/src/main.js"></script>进入到mian.js，发现main.js做了三件事
1、引用了src/assets/main.css
import './assets/main.css'2、导入了两个跟组件和一个js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'3、使用createApp组件创建应用实例并设置路由和挂载容器
// 创建名为app的实例
const app = createApp(App)
// 设置路由
app.use(router)
// 挂载容器
app.mount('#app')到这里可以看到，容器用的就是index.html中的 id="app"的div，css的引用就不去看了，都知道是干啥的。我们的目的是需要知道页面是怎么被加载出来的，因此这里需要去看路由router。
来到router文件夹下的index.js
我们发现index.js也做了三件事
1、从vue-router导入了两个组件，和从views文件夹下导入了自定义的vue页面
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'2、创建了页面跳转的路由
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
},
],
})3、将路由暴露出去
export default router分析
该初始项目向我们展示了路由的两种方式
一、是在顶部使用import统一导入要路由的页面，好处是统一管理了路由页面
二、是在具体的路由内部使用lambda表达式的方式指定导入要路由的页面。好处是看每个路由就准确知道要跳转的页面是什么和位置在哪
看到这里已经可以明白为什么页面会被跳转了，因为路由设置了默认跳转页面。
{
path: '/',
name: 'home',
component: HomeView,
},我们根据组件名称HomeView找到导入的组件HomeView.vue
来到HomeView.vue
我们发现HomeView.vue做了两件事
1、导入了名为TheWelcome的组件，组件地址指向components下的TheWelcome.vue文件
<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>2、在模板中使用了TheWelcome组件
<template>
<main>
<TheWelcome />
</main>
</template>继续去components文件夹下找TheWelcome.vue文件
来到TheWelcome.vue
该TheWelcome.vue文件中同样做了两件事
1、导入组件
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
import HelloVue from './icons/HelloVue.vue'
</script>2、使用模板加载组件并编写相应的文本
<template>
<WelcomeItem>
<template #icon>
<HelloVue/>
</template>
<template #heading>
HelloVue
</template>
<h4>Hello Vue3</h4>
hello vue,
nice to meet you,my name is syasuo.
you are a great language
</WelcomeItem>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
you need to test your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
and
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
>Cypress Component Testing</a
>.
<br />
More instructions are available in <code>README.md</code>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
Discord server, or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</a
>. You should also subscribe to
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a>
and follow the official
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
twitter account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem>
</template>
分析
到这里大家应该都能明白怎么样从导入的组件中找到对应的vue页面了，就不做赘述了。我们重点关注下template标签，该页面的道道都在这里体现
首先，template模板中使用了另外一个名为WelcomeItem的组件
然后，在WelcomItem组件中分别使用了两个特殊的template模板
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>这时候可能有问题了：为什么要在WelcomeItem组件中使用template呢，而且还加了#icon和#heading，这又是什么？
嗯，既然是在WelcomeItem组件中，那我们就去组件名WelcomeItem对应的vue中去一探究竟
来到WelcomeItem.vue
我们发现WelcomeItem.vue也是做了两件事
1、template中html的布局
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>2、CSS的定义
<style scoped>
.item {
margin-top: 2rem;
display: flex;
position: relative;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>这里我们不去看css了，都是页面美观的东西。
直接看html的布局，我们发现是一堆标签的嵌套，其中我们需要注意的是slot这个标签。该标签就是为什么WelcomeItem组件中使用template呢，而且还加了#icon和#heading的原因，这么一对照发现都对上了，问题得到解决了。
我们也发现了使用其他的组件是如此简单，只需要把组件名称引入进来即可，例如引入名为DocumentationIcon的组件就像以下这样
<DocumentationIcon />由于DocumentationIcon组件指向了DocumentationIcon.vue，因此我们就可以直接使用DocumentationIcon.vue了
看到这里，整个vue3的初始项目的运作分析就结束，你也应该明白了vue3的运作大体思路。都是组件的嵌套，正如其官网所述一般：每一个应用都需要一个根组件，其他组件将作为其子组件。
理解成Tree就恍然大悟了
结束
原文地址：https://blog.csdn.net/cm777/article/details/143772424
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！