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

標籤：目的   博文   好的   rip   環境配置   -o   bpa   SM   color   

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

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

　　一、什麼是main.js?裡面一般都是些什麼內容？

　　      1、 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
　　　　　　　　　　　　來源：簡書

 

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

　　　　三、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的基本配置、開發環境配置、生產環境配置等

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