一、概述
一个vue文件主要由三个部分组成：模板页面、js模块对象、css样式。
组件： 组件是一个局部功能界面，它包含了所有要实现这个功能界面的相关资源，如css、html等.
组件化编码的基本流程
1) 拆分界面, 抽取组件
2) 编写静态组件
3) 编写动态组件
初始化数据, 动态显示初始化界面；
实现与用户交互功能；
二、使用
以下主要演示组件化编码的过程，首先定义一个子组件HelloWorld.vue、然后在在根组件App.vue中引入子组件，
在main.js中将App.vue渲染到主页面index.jsp中去。
1. 组件化编程的步骤
(1) 首先定义一个子组件：HelloWorld.vue
{{msg}}
(2) 根组件App.vue：在根组件里面使用子组件,最终要将改组件渲染到index.html页面上去
(3) 入口js：main.js
/* 入口JS */ import Vue from 'vue' // 引入vue import App from './App.vue' // 1.引入App组件 // 创建vm实例, 最终的目的是将App组件渲染到index页面中去 /* eslint-disable no-new */ new Vue({ el: '#app', components: {App}, // 2.映射成标签：通过这个配置，将组件映射成指定名称的一个标签(即这里的标签名叫App), 这里{App}可以写成{App:App} template: '' // 3.使用组件标签：指定需要渲染到页面的模板，这个模板会插入到 '#app'中(el所匹配的页面上的div中) })
标签渲染也可以采用如下的简化写法：
/* 入口JS */ import Vue from 'vue' import App from './App.vue' import store from './store' import './base.css' // 创建vm /* eslint-disable no-new */ // new Vue({ // el: '#app', // components: {App}, // 映射组件标签 // template: '', // 指定需要渲染到页面的模板 // store // 所有的组件对象都多了一个属性: $store(值就是store对象) // }) // 这是比较简洁的写法 new Vue({ el: '#app', //箭头函数是用来定义匿名函数的，接收一个参数h, 而这个参数是函数类型的，这个是用来创建元素标签的(根据组件来创建)，这里是根据App组件来创建来创建所对应的标签 , //返回的结果最终会插入到el所对应的div中去 render: h => h(App), // 渲染函数, '=>'有两个作用：代表是一个函数;代表return 这个渲染函数代替了components、template的功能 store }) // 原始方式 // new Vue({ // el: '#app', // render: function (createElement) { // return createElement(App) //更具组件创建一个元素标签，相当于返回了 标签，而这个 标签会被插入到'#app'中去 // }, // store // })
(4) index.html: 这个页面基本上没有做任何的配置
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_blanktitle>
head>
<body>
<div id="app">div>
body>
html>