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

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

女爷i 2024-04-17 05:37 52阅读 0赞

关于它是怎么调用运作的：https://mp.csdn.net/postedit/86134414
一. 准备工作：

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

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>