vue项目运行流程

在工程化的项目中，vue要做的事情很单纯:通过 main.js 把 App.vue渲染到 index.html的指定区域中。其中:

App.vue 用来编写待渲染的模板结构
index.html中需要预留一个el区域
main.js 把 App.vue渲染到了index.html所预留的区域中

App.vue中就声明渲染UI结构（什么样的UI结构渲染到页面上），放在App组件内
最终是想将App根组件呈现到页面，所以提前页面上要放个占位符【public/index.html中已经帮我们生成好了一个<div id="app"></div>这就代表着以后，App组件内中的结构，会被替换到这个div所在的位置】
那怎么将App.vue中的模板结构替换到index中？使用main.js 构造函数的实例进行渲染
main.js中有啥？导入了Vue构造函数，然后new之后vm,指定渲染谁，渲染谁就把它放入以下App所在的位置

new Vue({render: h => h(APP),}).$mount('#app')

通过这个构造函数的实例渲染，渲染到哪里去？可以使用$mount，而这个$mount等价于 el: '#app',以下写法

new Vue({
    el: '#app',
    render: h => h(App)
})

App渲染并替换了我们的根元素#app，所以App现在变成了根组件。 render函数中，渲染的是哪个.vue组件，那么这个组件就叫做“根组件”

new Vue({render: h => h(APP),}).$mount('#app')

vue组件的三个部分组成

data函数

在结构中可以用插值渲染数据，或者给按钮绑定点击事件，而这些数据、事件要定义到script节点下。在script节点中要想定义数据不能直接写在data中。如以下写法错误

export default{
    data:{}
}

正确的应该 data在vue.js是个函数,data中再return,return的才是我们要写的数据对象

export default{
    data() {
        return {
            username: ''
        }
    }
}

如methods，watch，computed,定义到和data平级的位置

watch侦听器

侦听器Watch在定义时，最简单的是，想要侦听那个数据的变化，就把这个数据的名字，定义一个函数名。这种函数式的监听器，不会在一进入页面就触发一次。
改造：将侦听器改成对象的形式 还是监听谁就给谁定义一个属性，里面在写一个侦听器处理函数handler，只要这个数据变化了，就会自动调用这个handler。同时希望一进入页面就调用侦听器，使用immediate选项，对应值true。

如果是个对象的话默认是监听不到的，如果想监听对象中每个属性的变化，用到deep: true

如果只想监听对象中单个属性的变化，按下面方式定义watch 如：只想监听info对象中的username，要在下面watch中对，写个表达式，并在外面加上引号\

计算属性

他本质是个属性，只不过在定义时被定义成了方法

优点组件复用：
由于不用计算属性时，相同代码要写很多遍。
通过计算属性求一个值出来，下次再用到这个值，直接用计算属性

单页面应用程序

怎么创建出单页面应用程序：1.webpack去搭建 2.vue-cli（安装执行npm install -g @vue/cli，快速生成项目vue create 项目名字）