快速构建数据可视化微服务系统（二）—— 在vue中自定义组件

最新推荐文章于 2023-10-22 20:51:23 发布

原创最新推荐文章于 2023-10-22 20:51:23 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #自定义vue组件 #前端

前端专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍Vue项目的基本结构，包括关键目录的作用及文件说明。同时，深入讲解如何创建、引用及使用自定义组件，帮助读者快速掌握Vue项目搭建与组件开发流程。

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

在上一篇文章中，我们已经通过简单的方法生成了一个vue项目。那么下边简单介绍一下这个项目的结构：

build：编译相关文件
config：配置文件
node_module：npm的依赖
src：主要的代码

assets：存放静态资源的地方，和static不同，打包的时候会重新编译，建议存放自己写的资源。
components：存放组件的地方。
router：路由管理器，用于页面跳转。

static：静态资源

test：测试文件

除了上述的文件意外，剩下还有一些单独的文件，如：校验代码格式的文件、git上传代码的时候的忽略文件以及README等文件，这里就先不叙述。

要想使用自己的组件，那么就先观察一下刚刚创建好的项目。启动项目之后看到的是这个画面：

那么为什么出现的是这个画面呢？我们可以观察main.js这个文件。从命名来说，就知道这个文件是最主要的文件。所有的东西都是从这个文件开始，具体的代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

代码主要分为三个部分，分别是：<template>、<script>以及<style>。简单来说，分别是写html、js以及CSS的地方。

使用自己的组件有三个步骤：

创建组件
引用组件
使用

创建主键

先到components文件夹下边新建一个vue文件，内容可以如下：

<template>
  <div>
    aaa
  </div>
</template>

<script>
export default {
  name: 'MyComponent1',
  methods: {
    handleForward (key, keyPath) {
      this.$router.push('/page1')
    }
  }
}
</script>

<style scoped>

</style>

在main.js里边引用组件，一共是两步：import 组件，使用组件。需要更改的地方如下：

<script>
import MyComponent1 from './components/MyComponent1' // 引入包
export default {
  name: 'App',
  components: {MyComponent1} // 注册组件，{}中是组件的名称
}
</script>

然后就可以在template中使用自定义的组件了：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <my-component1></my-component1>
  </div>
</template>

这里有一个小地方需要注意：在script里边，我们注册主键使用的是驼峰命名的方式，但是到template里边使用的时候，就会自动变成了用 “ - ” 连接的方式。所以现在项目的主页就会变成这个样子：

可以看到最后一行增加了我们组件的内容“aaa”。但是上边还有默认的主页的内容，这是因为在main.js中默认写了这两行代码：

<img src="./assets/logo.png">
<router-view/>

其中“<router-view/>”就是一个默认写好的组件，对应的是components中的“HelloWord.vue”。只要把他们删掉就可以只用自己的组件了。