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

原文參考 https://blog.csdn.net/qq_20757489/article/details/84781188

 

接下來，就需要對main.js App.vue 等進行操作了。

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

一、什么是main.js?里面一般都是些什么內容？

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

 

1.  
   import Vue from 'vue'
2.  
   import App from './App'
3.  
   import router from './router'
4.  
    
5.  
   Vue.config.productionTip = false
6.  
    
7.  
   /* eslint-disable no-new */
8.  
   new Vue({
9.  
   el: '#app',
10.  
    router,
11.  
    components: { App },
12.  
    template: '<App/>'
13.  
    })

 

　　　 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.還可以有

1.  
   import router from './route'; --------- import router from './route.js';
2.  
   import axios from 'axios'; -------- import axios from '..\node_modules\axios\dist\axios.js';
3.  
   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
　　　　　　　　　　　　來源：簡書

 

二、App.vue又是干什么用的？

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

1.  
   <template>
2.  
   <div id="app">
3.  
   <img src="./assets/logo.png">
4.  
   <hello></hello>
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   import Hello from './components/Hello'
10.  
     
11.  
    export default {
12.  
    name: 'app',
13.  
    components: {
14.  
    Hello
15.  
    }
16.  
    }
17.  
    </script>
18.  
     
19.  
    <style>
20.  
    #app {
21.  
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
22.  
    -webkit-font-smoothing: antialiased;
23.  
    -moz-osx-font-smoothing: grayscale;
24.  
    text-align: center;
25.  
    color: #2c3e50;
26.  
    margin-top: 60px;
27.  
    }
28.  
    </style>

三、router index.js是做什么的？

　　router index.js 把准備好路由組件注冊到路由里：

1.  
   import Vue from 'vue'
2.  
   import Router from 'vue-router'
3.  
   import Recommed from 'components/recommend/recommend'
4.  
   import Singer from 'components/singer/singer'
5.  
   import Rank from 'components/rank/rank'
6.  
   import Search from 'components/search/search'
7.  
    
8.  
   Vue.use(Router)
9.  
    
10.  
    export default new Router({
11.  
    routes: [
12.  
    {
13.  
    path: '/',
14.  
    component: Recommed
15.  
    },
16.  
    {
17.  
    path: '/recommend',
18.  
    component: Recommed
19.  
    },
20.  
    {
21.  
    path: '/singer',
22.  
    component: Singer
23.  
    },
24.  
    {
25.  
    path: '/rank',
26.  
    component: Rank
27.  
    },
28.  
    {
29.  
    path: '/search',
30.  
    component: Search
31.  
    }
32.  
     
33.  
    ]
34.  
    })

　　這里還有一些其他的文件意思：

1. index.html文件入口

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

3. node_modules為依賴的模塊

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

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