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

关注

原创最新推荐文章于 2026-03-30 10:17:16 发布 388 阅读 AI 写同款· GEO 优化 ›

pls-00302: 必须声明组件_Spring AMQP RabbitAdmin 声明式配置 Spring AMQP RabbitAdmin 声明式配置Spring AMQP 中比较重要的一个组件就是 RabbitAdmin ，它封装了关于声明 Queue ，Exchage , Binding 等等，也可以删除和清空队列数据等等操作，内部是通过RabbitTempate 去发送的请求，调用的还是原生的 amqp-client 的API 操作的，这里面有一定的坑需要记... 阅读详情

一、项目结构：

初始化一个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启动项目，可以看到我们自己添加的子组件以及在页面上

收录于

实训笔记

vue

标签

#vue

vue-cli脚手架项目构建以及按需引入antd 安装vue-cli npm install vue/cli -g 查看vue版本注意：V要大写 vue -V 如果下载速度太慢，可以使用cnpm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 此时下载出来的应该是2.9.6版本的脚手架 vue项目创建分为两种 vue-cli2 vue init webpack name vue-cli3 vue create name 一.CLI. 阅读详情