vue2.0：項目開始，首頁入門（main.js，App.vue,importfrom）

對main.js App.vue 等進行操做：

　　可是這就出現了一個問題：什麼是main.js，他主要幹什麼用的？App.vue又是幹什麼用的？main.js 裏面的import from又在幹嗎？newVue（{}）是幹嗎的？裏面又須要什麼參數，它到底能幹什麼。在網上搜了一篇博文，解答一些初級的困惑。

　　1、什麼是main.js?裏面通常都是些什麼內容？

　　      一、 main.js 程序入口文件，是初始化vue實例並使用須要的插件,加載各類公共組件.

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

　　　 2.import from 是幹嗎的呢？

　　　　實際上，importfrom是ES6語法裏面的。由於相關知識不少，具體參見博客裏ES6裏面的import，export。

　　　　在這裏只是給你們介紹下它在這裏的用處。

　　　　a.

import Vue from 'vue';

　　　　其實最完整的寫法是：

　　　　　　　　　　　　　　

import Vue from "../node_modules/vue/dist/vue.js";

 　　　　意思是：由於main.js是在src文件中，因此../向前一級相對目錄查找node_modules，再依次尋找後面的文件。

 　　b.

import App from './App';

　　　　其實最完整的寫法是：

import App from './App.vue';

　　　　意思其實就是引入咱們寫好的.vue文件。

　　c.還能夠有

    ---------      　　　　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';

　小結：在簡書上看到有一我的總結的很好：

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

　　　　　下面附做者原文：
　　　　　　　　　　　　做者：趁你還年輕233
　　　　　　　　　　　　連接：https://www.jianshu.com/p/c0be35475e54
　　　　　　　　　　　　來源：簡書

 

　　2、App.vue又是幹什麼用的？

　　　　App.vue是咱們的主組件，頁面入口文件 ，全部頁面都是在App.vue下進行切換的。也是整個項目的關鍵，app.vue負責構建定義及頁面組件歸集。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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

  ]
})

　　這裏還有一些其餘的文件意思：

1. index.html文件入口

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

3. node_modules爲依賴的模塊

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

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