3.vue 项目的运行流程

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

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

1.App.vue文件（编写待渲染的模板结构）

 Test.vue是跟App.vue同级的自定义根组件

<template>
<div>
    <div class="test-box">
        <h3>这是用户自定义的Test.vue-----{{username}}</h3>
        <button @click="changeName">修改用户名</button>
    </div>
    <div>
        123
    </div>
</div>
</template>

<script>
/* 默认导出，固定写法 */
export default {
    //data数据源
    /* 1.注意：vue组件的data不能像之前一样，不能指向对象 
    2.注意：组件中的data必须是个函数*/
   /*  data:{
        username:'dilireba'
    } */
    data() {
        /* 这个return出去的{}中，可以定义数据 */
        return {
            username:'迪丽热巴'
        }
    },
    methods: {
        changeName(){
            /* 在组件中，this就表示当前组件的实例对象 */
            console.log(this);
            this.username='迪丽'
        }
    },
    /* 当前组件中的侦听器 */
    watch:{

    },
    /* 当前组件中的计算属性 */
    computed:{},
    /* 当前组件中的过滤器 */
    filters:{}
}
</script>


<style lang="less">
.test-box{
    background-color: pink;
    h3{
        color:orange;
    }
}
</style>

2.main.js(把App.vue 渲染到 index.html 所预留的区域)

/* 导入vue这个包，得到vue构造函数 */
import Vue from 'vue'

/* 导入App.vue根组件，将来要把App.vue中的模板结构渲染到HTML页面中 */
/* import App from './App.vue' */
import Test from './Test.vue'

Vue.config.productionTip = false


/* 创建Vue的实例对象 */
new Vue({
    /* 固定写法，把render函数指定的组件，渲染到HTML页面中 */
    render: h => h(Test),
}).$mount('#app')


/* Vue实例的$mount()方法：作用和el属性一样 */