關于它是怎么調用運作的：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>

實際項目中，第一個導入的組件文件是 Index.vue

總結

以上是生活随笔為你收集整理的vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。