VUE項目中main.js、App.vue、import...from...等重要文件的做用和意義

1、main.js

　  一、 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...總結：

　　　1.import...from...的from命令後面能夠跟不少路徑格式，若只給出vue，axios，less這樣的包名，則會自動到node_modules中查到，找到後則加載；若給出相對路徑及文件前綴，則到指定位置尋找；
　　　2.能夠加載各類各樣的文件：.js、.vue、.less等等。

3、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>

　　

4、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
    }

  ]
})

5、veu項目裏其餘的文件做用：

1. index.html：vue編譯後的html文件入口

2. src：放置組件和入口文件

3. node_modules：項目鎖依賴的模塊/包

4. config：配置了路徑端口值等

5. build：配置webpack的基本配置、開發環境配置、生產環境配置等