07 Vue组件化：创建组件、访问组件

最新推荐文章于 2023-07-12 19:12:14 发布

巅峰键盘侠

最新推荐文章于 2023-07-12 19:12:14 发布

阅读量128

点赞数

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/lihailin9073/article/details/100098638

版权

本文介绍了如何在Vue项目中创建组件。首先，通过WebStorm建立Vue项目，并加载相关依赖。接着，展示了项目目录结构，强调了/components目录下的HelloWorld.vue组件。然后，详细说明了创建NewsList.vue组件的步骤，包括复制并修改HelloWorld.vue，以及在router/index.js中配置路由。最后，提供了访问NewsList.vue组件的浏览器URL，即http://localhost:8080/#/news_list。

摘要由CSDN通过智能技术生成

1、使用WebStorm创建一个Vue项目

2、使用命令行加载相关依赖

cnpm install

3、查看创建好的项目src目录结构

如上图所示，WebStorm已经在src目录下生成了一个 /asserts 静态资源目录、一个 /components 组件目录、一个 /router 路由配置目录；其中 /components/HelloWrold.vue 文件就是一个Vue的组件，执行

npm run dev

启动项目后打开浏览器，默认显示的就是这个HelloWorld.vue组件的内容。

4、创建组件

（1）新增一个组件

复制HelloWorld.vue文件，改名为 NewsList.vue并打开编辑里面的代码

<template>
  <div class="hello">
    <h1>{
  { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'NewsList',
  data () {
    return {
      msg: '这是一个新闻列表组件'
    }
  }
}
</script>