详解Vue文件结构+实现一个简单案例

简介: 详解Vue文件结构+实现一个简单案例

🍋文件结构

├── public/              # 公共资源目录
│   ├── index.html       # 入口 HTML 文件
│   └── ...
├── src/                 # 项目源码目录
│   ├── assets/          # 静态资源目录(图片、样式等)
│   ├── components/      # 组件目录
│   ├── router/          # 路由配置目录
│   ├── store/           # Vuex 状态管理目录
│   ├── utils/           # 工具函数目录
│   ├── views/           # 视图目录
│   ├── App.vue          # 根组件
│   └── main.js          # 入口 JS 文件
├── .gitignore           # Git 忽略配置文件
├── babel.config.js      # Babel 配置文件
├── package.json         # 项目配置文件
└── README.md            # 项目说明文件

当然还有别的文件如下,这个文件主要是提醒用户安装VSCode的两个插件

这里在介绍一下Vue文件的大致结构

<template>html</template>结构
<script>JS或TS</script>交互
<style>样式</style>衣服

下面介绍一下main.js的大概内容

下面是为大家准备的代码片段,方便后续书写,不知道如何在VSCode添加代码片段的欢迎阅读Visual studio Code 配置用户代码片段—Vue为例

<template>
</template>
<script lang='ts'>
export default {
   name : ''
}
</script>
<style scoped>
</style>

🍋小案例

这里我有必要说一下,App.vue是一个根组件,而components里面的文件相当于是叶子,我们现在想在components里面创建一个person.vue,最终和App.vue相关联


我们首先在template里面写一小段html

<div class="person">
      <h2>姓名:{{ name }}</h2>
      <h2>年龄:{{ age }}</h2>
      <button @click="showName">显示姓名</button>
      <button @click="changeAge">修改年龄</button>
   </div>

接下来在script里面定义组件的行为和数据

注意:Vue3向下兼容Vue2语法,且Vue3中的模版可以没有根标签

export default {
   name : 'person',
   data(){
      return{
         name:'馒头',
         age:22
      }
   },
   methods:{
      showName(){
         alert(this.name)
      },
      changeAge(){
         this.age+=1
      }
   }
}

最后简单写一点样式

<style scoped>
.person {
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 20px;
   display: inline-block;
   margin: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: box-shadow 0.3s;
}
.person:hover {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button {
   margin: 0 5px;
   padding: 5px 10px;
   border: none;
   border-radius: 3px;
   background-color: #007bff;
   color: #fff;
   cursor: pointer;
   transition: background-color 0.3s;
}
button:hover {
   background-color: #0056b3;
}
</style>

接下来我们运行一下

最终的界面如下

细心的人会发现,这个你好是哪里来的~接下来我们看看


回到App.vue也就是根组件,你好就是在这里写的,同时这里我们将组件person加进去了,否则是不会出现刚刚在person组件里面写的内容

<template>
  <div class="app">
      <h1>你好</h1>
      <person></person>
  </div>
</template>
<script lang='ts'>
  import person from './components/person.vue'
  export default {
    name : 'App', //组件名
    components:{person} //注册组件
}
</script>
<style scoped>
 .app {
  background-color: aqua;
 }
</style>

🍋总结

index.html是项目入口文件,App.vue是根组件等一下概念,Vue2,3的包含关系以及一个小案例

挑战与创造都是很痛苦的,但是很充实。

相关文章
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
16 0
|
5天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
4天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
5天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
5天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
JavaScript 索引
VUE文件的创建
第一步创建完VUE 项目之后 可以根据自己的需求 创建自己的文件目录(下图是我的文件目录,当然每个人的创建目录的风格也是不同的所以不做严格的规范) 模块文生成    components文件夹下创建  模块文件名字.
778 0
|
5天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
5天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
5天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
|
5天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
8 0