vue-cli 項目啟動過程分析

啟動時沒有加入路由

先npm run dev 把項目啟動起來。看到

這個熟悉的界面。
首先看到:

這是項目的入口文件，一般引用其他的js，也都是在這個文件進行引用的。 渲染的時候，就是對這個id=“app”的div進行渲染。

然后來到main.js： vue項目的入口文件。

這里可以看到，生命了一個全局的vue實例，綁定在了#app上面，也就是上面index.html中的那個div。
然后這個vue實例，使用的是 ./App這個組件，然后模板是:' '，這就是說明是用上面的App組件進行渲染的。

然后接着看App.vue

App.vue 這個組件中，模板中，就是一個img，下面是一個 的組件，這個組件，在'./components/HelloWorld'中。
引用組件，使用了import HelloWorld from './components/HelloWorld'

再看一下hello.vue這個組件，基本就是下面的各個鏈接了。

啟動時加入了路由

可以看到index.html和之前一樣，沒有變化。

可以看到，在這個全局的實例里面，加入了router這個，然后向上看，router在'./router'，這個導入是默認等效於import router from './router/index.js'這個的
具體為什么呢？可以參看vue項目main.js文件下import router from './router'默認導入router文件夾下index.js的原因

然后我們到App.vue這個文件

可以看出，這個已經不是上面的 這個子組件了。
而是 這個就是一個路由顯示的地方， 之前在全局的vue實例當中，我們加入了router，再看router/index.js

啊，這時候，我們就知道，他是在這個設置了默認路由'/'，路由，到哪里呢？ 當時是 這個子組件了。
還有一個問題就是import HelloWorld from '@/components/HelloWorld' 這個@/是到哪里去了呢？
這個可以參考: vue項目中有時間文件路徑上有@，代表什么意思？