VUE,vue-cli项目结构,以及在vue-cli脚手架原始项目框架引入模块

本文介绍了Vue CLI项目的基本结构,包括app.vue作为根组件和main.js作为应用入口。还详细讲解了如何在项目中添加和引入新模块,涉及在components文件夹下创建新的vue文件,定义模板、脚本和样式,并在app.vue中导入和使用子组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、项目结构:

初始化一个vue-cli之后,我们可以在目录中看到以下结构。
在这里插入图片描述

app.vue

src下的app.vue是项目的根组件,可以包含其他的子组件。在项目运行时进入的首页即为app.vue。子组件写在src文件夹下的components内。根组件和子组件组成组件树。
在这里插入图片描述

main.js

在这里插入图片描述

mian.js是vue应用的入口文件,可以创建一个新的vue实例并挂载再根节点下。Vue插件也从这里引入。

二、添加引入新模块

1.在components文件夹下新建一个vue文件
在这里插入图片描述
模块内基本组件:

  • template,在里面添加模块可视内容
  • script,使用export default将模块导出
  • style,控制组件样式,建议在后面加一个scoped避免样式影响到其他组件

例子:创建student.vue

<template>
  <div id="student">
    <h3>student list</h3>
    <ul>
      <li v-for="(item, index) in students" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "student",
  //定义子组件的name
  data() {
    return {
      students: [
        {
          id: 1,
          name: "lisi",
          age: 12,
        },
        {
          id: 2,
          name: "xiaohong",
          age: 11,
        },
        {
          id: 1,
          name: "zhangsan",
          age: 13,
        },
      ],
    };
  },
  methods: {},
};
</script>
<style scoped>
</style>
    

2.载入模块
回到根组件app.vue内使用import导入创建的子组件

import student from './components/student.vue'

在export default的components中添加子组件名称
在这里插入图片描述- npm run serve启动项目,可以看到我们自己添加的子组件以及在页面上
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值