Vue学习框架

1 Vue

2 Vue框架

3 Vue问题

4 Vue生命周期

参考：
https://cn.vuejs.org/v2/guide/instance.html

5 Vue的五个属性

参考：
https://www.cnblogs.com/lyxzxp/p/11778579.html
http://www.ujiuye.com/wenda/2021/70919.html

笔记：
vuex的五个属性分别为：state、getters、 mutations、actions、modules。
state：单一状态树，用一个对象就包含了全部的应用层级状态。
getters：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutations：每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
Action：Action 类似于mutation，不同在于：Action 提交的是mutation，而不是直接变更状态;Action可以包含任意异步操作。
modules：模块化vuex，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

说明：
state：vuex的基本数据，用来存储变量。
getters：从基本数据（state）派生的数据，相当于state的计算属性。
mutation：提交更新数据的方法，必须是同步的（如果需要异步使用action）。每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。
回调函数就是我们实际进行状态更改的地方，并且它会接收state作为第一个参数，提交载荷作为第二个参数。
action：和mutation的功能大致相同，不同之处在于：1.Action提交的是mutation，而不是直接更改状态；2.Action可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。

Vue

参考：https://cn.vuejs.org/v2/guide/installation.html

1. vue.js介绍

渐进式JavaScript框架

• Vue.js优点
  • 体积小
  • 更高的运行效率
    基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来病优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM。
  • 双向数据绑定
    让开发者不要再去操作dom独享，把更多的精力投入到业务逻辑上。
  • 生态丰富，学习成本低

Vue.js 全段开发人员必修技能
被广泛的应用于web端，移动端，跨平台应用开发。

1. 安装与部署

第一种安装方式（简单）：
直接下载并用<script>标签引入，Vue会被注册为一个全局变量。

NPM
在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。
安装命令：

npm install
 vue

第二种安装方式：
命令行工具（CLI）
Vue提供了一个官方的CLI，为单页面应用（SPA）快速搭建复杂的脚手架。

Vude.js有开发版本/生产版本。

引入：

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

引入成功，会暴露一个全局的变量，Vue()

第二种引入方式：CDN方式

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 创建第一个vue应用

声明式渲染
Vue.js的核心是一个允许 采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
Vue.js的应用分为两个重要的部分，一个是视图，一个是脚本。

视图部分，比如使用div标签来定义（指定一个id值），然后使用左右双大括号{{}}来声明变量。
脚本部分，使用script标签来定义，使用new Vuew() 来返回一个应用。
其中，el表示元素element，并使用id选择器（#号开头）来选中视图部分的div。
第二个为data，表示数据，用户保存数据。我们在视图中声明了哪些变量，就需要在data中进行注册并初始化赋值。

HBuilderX 预览：

3. 数据与方法

Vue实例
创建一个Vue实例：
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：

var vm = new Vue({
    //选项
})

当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时看，视图会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的。

对变量使用Object.freeze()，这会阻止修改现有的属性，也意味着相应系统无法再追踪变化。

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀watch是一个实例方法，可以观察一个变量的变化，并且获取变化前/后的结果。
该方法第一个参数为需要观察的变量，第二个参数为一个回调，回调参数的参数分别为newVal和oldVal。

4. 生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会晕习惯一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 creatd钩子可以用来在一个实例被创建之后执行代码。
也有一些其他的钩子，在实例生命周期的不同阶段调用，如mounted、updated和destroyed，生命周期钩子的this上下文执行调用它的Vue实例。

注意：
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到为止，经常导致Uncaught TypeError：Cannot read property of undefined 或 Uncaught TypeError：this.myMethod is not a function 之类的错误。

扩展：
点击官网上的学习，可以进入 选项/生命周期钩子，学习生命周期API介绍。

API：
beforeCreate 在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。
created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 替换，挂载成功。
beforeUpdate 数据更新时调用
updated 组件DOM已经更新，组件更新完毕。

设置类似定时器或者延时函数方法：如下是在3秒之后更新msg变量的数据。

 setTimeout(function(){
    vm.msg = "change ...";
}, 3000);

注意：该方法执行时，会有beforeUpdate和updated两个回调。

其他API：
activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated keep-alive组件停用时调用。该钩子在服务器端渲染期间不被调用。
beforeDestroy 实例销毁之前调用，在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured 2.5.0+新增。当捕获一个来自子组件的错误时调用。

5. 模板语法-插值

模板语法：
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的JSK语法。

插值：

• 文本：
  数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。
  Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
  通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。

• 原始HTML
  双大括号会将将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令。

• 特性
  Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。
  <div v-bind:id="dynamicId"></div>
  对于布尔特性（它们只要存在就意味着为true），v-bind工作起来略有不同。
  <button v-bind:disabled="isButtonDisabled">Button</button>
  如果isButtonDisabled的值是null、undefined或false，则disabled特性设置不会被包含在渲染出来的<button>元素中。
  格式为：

v-bind:属性=""

• 使用JavaScript表达式

{{ number + 1}}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1}}  //这是语句，不是表达式
{{if (ok) {return message} }} //流控制也不会生效，请使用三元表达式

注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date，你不应该在模板表达式中试图访问用户定义的全局变量。

6. 模板语法-指令

指令：
指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式（v-for是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

<p v-if="seen">you see me now</p>

这里，v-if指令将根据表达式 seen 的值的真假来插入/移除<p> 元素。

• 参数：
  一些指令能够接收一个“参数”，在指令名称之后以冒号表示，例如，v-bind指令可以用于响应式地更新HTML特性。

<a v-bind:href="url">...</a>

在这里 href 是参数，告知v-bind指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是v-on指令，它用于监听DOM事件。

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。

• 动态参数

• 修饰符
  修饰符（modifier）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

• 缩写
  v- 前缀作为一种视觉提示，用来识别模板中Vue特定的特性。当你在使用Vue.js为现有标签添加动态行为（dynamic behavior）时，v- 前缀很有帮助，然而，对于欧一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由Vue管理所有模板的单页面应用程序（SPA - single page application）时，v- 前缀也变得没有那么重要了。因此，Vue为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写。
  简写格式：

<div @click="click1"></div>

7. class与style绑定

class与style绑定：
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定HTML Class

• 对象语法
  我们可以传给 v-bind:class 一个对象，以动态地切换class。
  <div v-bind:class="{ active : isActive" }"></div>
  上面的语法表示active这个class 存在与否将取决于数据属性isActive 的truthless。
  你可以在对象中传入更多属性来动态切换多个class。此外， v-bind:class 指令也可以与普通的class 属性共存。当有如下模板：

<div 
    class="static" 
    v-bind:class="{ active : isActive, 'text-danger' : hasError }">
</div>

和如下 data：

data: {
    isActive: true,
    hasError: false
}

结果渲染为：

<div class="static active"></div>

当isActive或者hasError变化时，class列表将相应地更新。
特别注意：这里class对应的是CSS样式，需要在<style>里进行定义的。

其它：静态数组定义如下：

<div 
   class="static" 
   v-bind:class="[ 'active', 'green' ]">
</div>

其它：动态数组定义如下 (使用三元表达式)：

<div 
    class="static" 
    v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '' ]">
</div>

绑定内联样式：

• 对象语法
  v-bind:style 的语法十分直观——看着非常像CSS，但其实是有个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebab-case，记得用引号括起来）来命名。

• 数组语法

8. 条件渲染

条件渲染：
v-if：
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。
也可以用v-else添加一个“else块”。

v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。

• 在<template>元素上使用v-if条件渲染分组
  因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当作不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含<template>元素。

• v-else-if
  在2.1.0新增。充当v-if的“else-if块”了，可以连续使用。

v-show
另一个用于根据条件展示元素的选项是v-show指令。用于大致一样。
不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show指示简单地切换元素的CSS属性display。
注意：v-show不支持<template>元素，也不支持v-else。

v-if VS v-show
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则说明也不做——一直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被暄软，并且只是简单地基于CSS进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁的切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

v-if 与 v-for 一起使用
注意：不推荐同时使用v-if和v-for。
当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

9. 列表渲染

列表渲染
用v-for把一个数组对应为一组元素
我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items时源数据数组，而item则是被迭代的数组元素的别名。

格式：

item,index in items
value,key in object

注意：
在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下都一致。

维护状态：
当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引为止正确渲染。这个类似Vue 1.x的track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态（例如：表单输入值）的列表渲染输出。
为了给Vue一个提示，以便它能更总每个节点的身份，从而重用和重新排序现有元素，你需要为每个项提供一个唯一key属性。

格式-例子：

<li v-for="item,index in items" : key="index"></li>
<li v-for="value,key in object" : key="index"></li>

10. 事件绑定

事件处理
监听时间：
可以用v-on指令监听DOM事件，并在触发时与行一些JavaScript代码。

事件处理方法：
然后许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

事件修饰符：
在事件处理程序中调用event.preventDefault()或event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯碎的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vuew.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
事件修饰符：
.stop 阻止单击事件继续传播
.prevent 提交事件不再重载页面
.capture 添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理过程，即事件不是从内部元素触发的
.once （点击）事件将只会触发一次（2.1.4新增）
.passive
说明：修饰符可以串联。语句也可以只有修饰符。
注意：使用修饰符时，顺序很重要；相应的代码回以同样的顺序产生。因此，用v-on:click.prevent.self 会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

11. 表单输入绑定

表单输入绑定
基础语法：
你可以用 v-model 指令在表单 <input>、<textarea>及<select>元素上的创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：
v-model 会忽略所有表单元素的value、checked、selected特性的 初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text和textarea元素使用value苏醒和input事件；
• checkbox和radio使用checked属性和change事件；
• select字段将value作为prop并将change作为事件。

注意：
对于需要使用输入法（如中文、日文、韩文等）的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。

注意：如下区（初步分析：非权威解释）
v-on:click 这个一般放在div（非button）区域，设置点击绑定
@click 这个一般放在button控件内，设置点击绑定

12. 组件基础

组件基础
//定义一个名为button-counter的新组件

Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
            }
        },
        templdate: '<button v-on:click="count++">You clickled me {{ count }} times. </button>'
})

组件是可复用的Vue实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过new Vuew 创建的Vue根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
    <button-counter></button-counter>
</div>

new Vue({el: '#components-demo'})

注意：
templdate如果需要定义多个节点区域（比如div），则需要设置一个根节点来框起来。

slot 插槽

13. 组件注册

组件注册
组件名：
在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component('my-component-name', { /*..*/ })

该组件名就是Vue.component的第一个参数。
你给予组件的名字可能依赖于你打算拿它做什么。当直接在DOM中使用一个组件（而不是在字符串模板或单文件组件）的时候，我们强烈推荐遵循W3C规范中的自定义组件名（字母全小写且必须包含一个连字符）。这会帮助你帮助你避免和当前以及未来的HTML元素组冲突。

• 组件名大小写
  定义组件名的方式有两种：
  • 使用 kebab-case
    当使用kebab-case（短横线分隔命名）定义一个组件时，你也必须在饮用这个自定义元素时使用kebab-case。例如<my-component-name>。
  • 使用PascalCase
    当使用PascalCase（首字母大写命令）定义一个组件时，你在引用这个自定义元素时两种命名法斗可以使用。也就是说，<my-component-name>和<MyComponentName>都是可接受的。注意，尽管如此，直接在DOM（即非字符串的模板）中使用时只有kebab-case时有效的。

全局注册：
到目前为止，我们只用过 Vue.component 来创建组件：

Vue.component( 'my-component-name', {
    // ... 选项 ...
})

这些组件是全局注册。也就是说它们在注册之后可以用在任何新创建的Vud根实例（new Vue）的模板中。

局部注册：
全局注册往往是不够理想的。比如，如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的JavaScript的无谓的增加。

在这些情况下，你可以通过一个普通的JavaScript对象来定义组件：

var ComponentA = { /* .. */}
var ComponentB = { /* .. */}
var ComponentC = { /* .. */}

然后在components选项中定义你想要使用的组件：

new Vue({
    el: '#app',
    components: {
        'component-a' : ComponentA,
        'component-b' : ComponentB
    }
})

• 在模块系统中局部注册
  如果你还在阅读，说明你使用了诸如Babel和webpck的模块系统。在这些情况下，我们推荐创建一个components目录，并将每个组件放置在其各自的文件中。
  然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的ComponentB.js或ComponentB.Vue文件中：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
   components: {
       ComponentA,
       ComponentC
       },
       //...
}

现在ComponentA和ComponentC都可以在ComponentB的模板中使用了。

• 基础组件的自动化全局注册
  可能你的许多组件只是包裹了一个输入框或按钮之类的元素可，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。
  所以会导致很多组件里都会有一个包含基础组件的长列表。

14. 单文件组件

单文件组件
介绍：
在很多Vue项目中，我们使用Vue.component来定义全局组件，紧接着用new Vue({el: '#container'})在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作得很好，在这些项目里JavaScript只被用来加强特定的视图。但在更复杂的项目中，或者你的前端完全由JavaScript驱动的时候，下面这些确定将变得非常明显。

• 全局定义（Global definitions）强制要求每个component中的命名不得重复。
• 字符串模板（String template）缺乏语法高亮，在HTML有多行的时候，需要用9哦你感到丑陋的\
• 不支持CSS（No CSS support）意味着当HTML和JavaScript组件化时，CSS明显被遗漏
• 没有构建步骤（No build step）限制只能使用HTML和ESS JavaScript，而不能使用预处理器，如Pug（formerly Jade）和Babel

文件名扩展名为 .vue 的single-file components（单文件组件）为以上所有问题提供了解决方法，并且还可以使用webpack或Browserify等构建工具。
这是一个文件名为Hello.vue的简单实例：

<template>
    <p>{{ greeting }} World!</p>
</templdate>

为了可以使用单文件组件。需要安装如下工具：

• 1. 安装 npm
     npm 全程为 Node Package Manager， 是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持唱的第三方模块最多的包管理器。

npm -v

• 2. 由于网络原因，安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 3. 安装 vue-cli

cnpm install -g @vuew/cli

• 4. 安装 webpack

cnpm install -g webpack

webpack 是 JavaScript打包器（module bundler）

单文件组件结构：
public ：生产目录
src下assets ： 资源目录
src下components：组件目录
src下App.vue ：App入口文件

单文件组件文件内容分布：分为3个区域

<template>
//模板/视图区域
</template>
<script>
//脚本区域
</scrip>
<style>
//样式区域
</style>

其中：脚本区域
声明组件的名称/属性/方法/数据等

<script>
export default {
    name : 'HelloWorld',
    props : {
        msg : {
            type : String,
            default : "test msg"
        }
    },
    methods : {
        
    },
    data() {
        return {
        
        }
    },
}
</scrip>

定义好单文件组件后，在其它文件/组件中引入方式如下：

<template>
    <div id="app">
        <HelloWorld msg="Welcome to Your Vue.js App" ./>
    </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
    name : 'app',
    components: {
        HelloWorld
    }
}
</scrip>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>

15. 免终端开发vue应用

uni-app + HBuilder X

cli方式
cli是命令行，一个黑色的终端窗体，在里面敲命令。这要求开发者需要了解终端、node、npm等很多知识，不然在以下方面会困难重重：

• 1. 搭建项目环境
• 2. 运行和发布项目
• 3. 配置less/sass/typescript/babel等预编译器
• 4. 安装各种流行的组件库

使用uni-app + HBuilder X
uni-app和HBuilder X都是DCloud公司出品的，前者是框架，后者是ide，它们互相搭配，使得基于vue.hjs开发项目变得更简单和高效！让开发者把更多精力放在业务逻辑上。

项目结构：
pages ： 业务页面文件存放的目录
index ：
index.vue ： index 页面
static ： 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
main.js ： Vue初始化入口文件
App.vue ： 应用配置，用来配置App全局样式以及监听 应用生命周期
manifest.json ： 配置应用名称、appid、logo、版本等打包信息
pages.json ： 配置页面路由、导航条、选项卡等页面类信息

安装插件

uni-app提供了许多基础组件

基础组件：
框架为开发者提供了一系列组件，类似HTML里的基础标签元素。
但uni-app的组件与HTML不同，而是与微信小程序相同，更适合手机端使用。
虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigatro等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发。基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。
Dcloud提供了扩展组件框架uni-ui，同时更过三方开发的组件也收录到插件市场。
什么是组件：

• 1. 组件是视图层的基本组成单元。
• 2. 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个 标签之内。
     注意：
• 1. 所有组件与属性都是小写，单词之间以连字符 - 连接。
• 2. 根节点为 <templdate> ，这个 <templdate> 下只能有一个根 <view> 组件。
• 3. 平台差异说明若无特殊说明，则表示所有平台均支持。

插件市场：
使用HBuilder X导入插件。
导入的插件会放置在项目的components目录下。
插件导入：
在script标签里使用如下导入插件：

import uniNumberBox from "@/components/uni-numberp-box/uni-number-box.vue"

然后在templdate标签下使用组件名uni-number-box来创建视图控件。

自定义组件component
script标签下：

export default {
    props : { //属性
        title : { //变量之一
            type : String, //变量 类型
            defautl : :"" //变量 默认值
        },
        content : { //变量之二
            type : String, 
            defautl : :"" 
        }
    },
    data() { //数据
        return  {
        
        };
    }
}

组件内部事件传递给父级组件：
在自定义组件的template标签下，给视图层（比如view标签下的h1标签）添加tap点击事件（@tap="tap1"），其中tap1为点击事件绑定的函数。
然后在script标签下的methods属性声明事件对应的函数（即tap1函数）。
可以在methods属性下函数（即tap1函数）下通过如下方式进行传递：
this.$emit('tap1', this.title)
其中，emit第一个参数为函数名称，第二个参数为传递的参数，如果参数比较多，可以使用数组来传参。
在父级组件里可以在template标签下，在自定义组件对应创建的标签里通过@tap1绑定一个函数（比如tap）。并在script标签下的methods里声明该函数。