關(guān)于它是怎么調(diào)用運作的：https://mp.csdn.net/postedit/86134414
一. 準(zhǔn)備工作：

1.下載webstorm，安裝vue。

2.創(chuàng)建項目，cd到要放項目的文件夾下

vue init webpack vue_test

3.安裝各種包

npm install

4.運行

cd vue_test

運行 npm run dev

5.打開網(wǎng)頁 http://localhost:8080

關(guān)于生命周期怎么運作的，推薦 https://blog.csdn.net/zbl744949461/article/details/86134414

關(guān)于一些心得經(jīng)驗， https://blog.csdn.net/zbl744949461/article/details/80433572

彩蛋：開發(fā)中零零碎碎的小經(jīng)驗 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中導(dǎo)入組件，并定義路徑 （這里name為fine3，組件和導(dǎo)入名為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下導(dǎo)入組件，并應(yīng)用。（導(dǎo)入和組件名寫的Fine，得出結(jié)論，只要導(dǎo)入和組件名一致就可以了，與其他地方定義無關(guān)）這里把所有的引用都要寫在根div下（name：app）（或者不寫name也可以）。

阮大大的書：上面代碼的import命令，可以用任意名稱指向export-default.js輸出的方法，這時就不需要知道原模塊輸出的函數(shù)名。需要注意的是，這時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>

實際項目中，第一個導(dǎo)入的組件文件是 Index.vue

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。