09月01, 2020

VUE组件结构

在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 webpack 或 Browserify 等构建工具。

一、项目入口

main.js    --项目入口src目录下
  1. main.js文件介绍
Vue.config.productionTip = false    开发时的配置,可以暂时不用管
  1. 初始化一个VUE实例
new Vue({
 el: '#app',
绑定一个元素,绑定一个叫app的根组件元素,如上图中index.html中的<div id="app"></div>组件元素。

 components: { App },
把组件注入进来

 template: '<App/>'
模板,指定一个组件app.vue
})

引入组件步骤

  1. 引入组件
import App from './App.vue'
  1. 加载视图
template: '<App/>'
  1. 创建一个组件名字,加载视图组件名字和该名字一样。
components: { App },

二、组件说明

Vue组件包括三部分:

  1. template(视图部分)
  2. script(逻辑或者数据交互部分)
  3. style(样式部分)

本文链接:https://www.yanxizhu.com/post/VUE component structure.html

-- EOF --

Comments