一、main.js
1、 main.js 程序入口文件，初始化vue實例，並引入使用需要的插件和各種公共組件.
import Vue from 'vue'
import App from './App'
import router from './router'
import Less from 'Less'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
new Vue代表新建vue對象
el官方解釋：爲實例提供掛載元素。值可以是 CSS 選擇符，或實際 HTML 元素，或返回 HTML 元素的函數。這裏就通過index.html中的<div id="app"><div>中的id=“app”和這裏的“#app”進行掛載。
components:代表組件。這裏的App，實際是App:App的省略寫法，template裏使用的 <App/>標籤來自組件App。
template：代表模板。官方解釋：模板將會替換掛載的元素。掛載元素的內容都將被忽略。
也就是說:template: '<App/>' 表示用<app></app>替換index.html裏面的<div id="app"></div>
例：
我們把main中components這行註釋掉：
再看頁面：發現裏面就有一個<app></app>標籤。
main.js中new Vue對象中寫入router，實際上是router:router，作用是main.js引入了router對象，根據路由的配置方法，需要將router對象加載到根main..js中。
二、import...from...
import...from...是ES6語法裏面的新特性，用來引入外部文件
例1：
import Vue from 'vue';
其實最完整的寫法是：
import Vue from "../node_modules/vue/dist/vue.js";
意思是：因爲main.js是在src文件中，所以../向前一級相對目錄查找node_modules，再依次尋找後面的文件。
例2：
import App from './App';
其實最完整的寫法是：
import App from './App.vue';
意思其實就是引入我們寫好的.vue文件。
例3：
import router from './route'; --------- import router from './route.js';
import axios from 'axios'; -------- import axios from '..\node_modules\axios\dist\axios.js';
import './less/index'; -------- import './less/index.less';
import...from...總結：
2.可以加載各種各樣的文件：.js、.vue、.less等等。
三、App.vue
App.vue是項目的主組件，頁面入口文件 ，所有頁面都在App.vue下進行切換，app.vue負責構建定義及頁面組件歸集。
<template>
<div id="app">
<img class="img" src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 160px;
.img{
width: 200px;
}
}
</style>
四、router文件夾裏的index.js
router裏的index.js 把準備好路由組件註冊到路由裏：
import Vue from 'vue'
import Router from 'vue-router'
import Recommed from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/’,
component: Recommed
},
{
path: ‘/recommend’,
component: Recommed
},
{
path: ‘/singer’,
component: Singer
},
{
path: ‘/rank’,
component: Rank
},
{
path: ‘/search’,
component: Search
}
]
})
五、veu項目裏其他的文件作用：
-
index.html：vue編譯後的html文件入口
-
src：放置組件和入口文件
-
node_modules：項目鎖依賴的模塊/包
-
config：配置了路徑端口值等
-
build：配置webpack的基本配置、開發環境配置、生產環境配置等
轉載於:https://www.cnblogs.com/webwangjie/p/11471542.html