Vue项目结构分析
Posted Harris-H
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue项目结构分析相关的知识，希望对你有一定的参考价值。
Vue项目结构分析
1.目录
这里是使用Vite构建项目
2.效果
3.分析
- node_modules 是存放依赖的文件夹
- public文件夹存放公共资源文件
- src 用于编写的代码
- assets 存放图片资源
- components 存放公共组件
- App.vue 根组件
- main.js 入口文件
- style.css 存放全局的样式
- .gitignore 忽略git一些的文件
- index.html 入口的网页
- package-lock.json 依赖的相关信息
- package.json 项目的相关信息、脚本
- vite.config.js 配置文件
- README.md 说明
4.主要代码解释
App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo
height: 6em;
padding: 1.5em;
will-change: filter;
.logo:hover
filter: drop-shadow(0 0 2em #646cffaa);
.logo.vue:hover
filter: drop-shadow(0 0 2em #42b883aa);
</style>
这里script setup就是组件在实例化时执行的setup函数，这里的操作就是引入Helloworld组件。
然后template是用于展示的html内容。
style是相关样式，scoped 是指只作用于该组件。
然后HellWorld.vue 结构也是类似，为一个组件。这里不展开说明。
main.js
import createApp from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
这里main.js 引入了vue 的creatApp 方法用于创建组件对象，然后mount挂载到具体的dom元素上 这里是id=app的 div 元素，具体位置在index.html中。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
script 引入main.js脚本。
div id=app 就是被挂载的dom元素。
最终启动项目 npm run dev
显示的内容就是index.html显示的内容。
以上是关于Vue项目结构分析的主要内容，如果未能解决你的问题，请参考以下文章