vue-cli3添加组件流程(新手向)

一、流程结构

在添加组件前呢,先了解一下vue项目的运行流程。

  • 整个项目的入口是main.js,在开头就引入了vue源码和主页面App.vue。
  • 之后是生成一个Vue实例,把App.vue的内容渲染到浏览器上
    vue-cli3添加组件流程(新手向)_第1张图片
    vue-cli3添加组件流程(新手向)_第2张图片

新建组件

为新建的vue项目添加组件,一般是放在文件夹components下,然后在App.vue(或者其他你想引入组件的地方)导入组件

  • 新建组件list
    vue-cli3添加组件流程(新手向)_第3张图片


  • 引入App.vue并使用组件
    vue-cli3添加组件流程(新手向)_第4张图片
  • 事实上,新建的项目里已经有一个组件了,就是components下的HelloWorld.vue。

vue-cli3添加组件流程(新手向)_第5张图片
vue-cli3添加组件流程(新手向)_第6张图片

你可能感兴趣的:(vue)