在介紹完簡單的項目目錄之后，我們對項目自動生成的歡迎頁進行講解（也就是對src目錄進行講解）。
image.png
src目錄如圖所示：
image.png
1、mian.js——項目的入口
image.png
mian.js主要負責引入vue，創建vue實例，引入根組件，路由配置以及插件等。
我們可以看見，其中引入了App.vue文件（引入的時候.vue可以省略），并在下面作為根組件進行了使用。
在后期，我們將會在main.js中引入我們安裝的插件。
2、App.vue——根組件
image.png
image.png
其中：
assets為靜態資源存放點，主要存放css，外部js等
<router-view/>可以理解為存放路由跳轉頁面的容器。
由于vue是單頁面的應用，頁面跳轉是通過路由來進行模仿的，其實并沒有發生真正的跳轉。
<router-view/>中的內容存放的是vue-router指定的內容。
3、router/index.js——路由配置
在這個文件中，我們可以進行路由配置，包括子路由等，也可以通過導航守衛進行路由限制。
舉個例子：某些頁面需要登錄，跳轉到這些頁面的時候，我們就將其進行攔截，跳轉到登陸頁面去。這部分內容后期會進行講解。
image.png
圖中，我們不難看出，默認引入了叫HelloWorld.vue的文件。并在routers中進行了使用。
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
path:url訪問的路徑，這里的‘/’表示在http://localhost:8080/#/的時候進行訪問。
name:這個router的名字，跳轉時也可通過name來指定跳轉到哪個路由中。
component:顧名思義，表示使用的哪個組件。
3、components/HelloWorld.vue——歡迎組件
在vue項目中，組件存放在components文件夾中，這些組件可以通過路由來進行使用，也可以通過組件間的引入來進行使用。
image.png
