vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试

（题外话：推荐一篇vue搭建项目晋级篇 https://blog.csdn.net/zbl744949461/article/details/110039452）

一. 准备工作：

1.下载webstorm，安装vue。

2.创建项目，cd到要放项目的文件夹下

   vue init webpack vue_test 

3.安装各种包

  npm install

4.运行  

   cd vue_test

   运行 npm run dev

5.打开网页  http://localhost:8080

关于生命周期怎么运作的，推荐  https://blog.csdn.net/zbl744949461/article/details/86134414

关于一些心得经验， https://blog.csdn.net/zbl744949461/article/details/80433572

彩蛋：开发中零零碎碎的小经验 https://blog.csdn.net/zbl744949461/article/details/80999951

vue架构课：http://www.zhufengpeixun.cn/train/vue-info/component.html

1.把文件按顺序打开 在components下新建一个vue文件Fine

Fine:（这里的name写的fine1，用来测试name的影响）

<template>
    <div class="fine">
      <h1>{{msg}}</h1>
      <p>{{p1}}</p>
    </div>
</template>

<script>
    export default {
        name:'fine1',
        data(){
          return {
            msg:"I'm so good!",
            p1:"ding  luck"
          }
        }
    }

2.在index.js中导入组件，并定义路径 （这里name为fine3，组件和导入名为fine2）

   这个index.js是router/index.js 是路由用的，在vue的脚手架里引用的。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import fine2 from '@/components/Fine'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/',
      name:'fine3',
      compinent:fine2
    }
  ]
})

3.在app.vue下导入组件，并应用。（导入和组件名写的Fine，得出结论，只要导入和组件名一致就可以了，与其他地方定义无关）这里把所有的引用都要写在根div下（name：app）（或者不写name也可以）。

阮大大的书：上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view/>
    <div class="hello">
      <h1>{{msg}}</h1>
    </div>
    <fine></fine>
  </div>
</template>

<script>
import Fine from './components/Fine.vue'
export default {
//  name: 'App'
  name:'app',
  data(){
    return{
      msg:'欢迎来到菜鸟教程！'
    }
  },
  components:{
    Fine
  }
}
</script>

实际项目中，第一个导入的组件文件是 Index.vue