vue2.0:專案開始,首頁入門(main.js,App.vue,import...from)
接下來,就需要對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' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<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
}
]
})
這裡還有一些其他的檔案意思:
-
index.html檔案入口
-
src放置元件和入口檔案
-
node_modules為依賴的模組
-
config中配置了路徑埠值等
-
build中配置了webpack的基本配置、開發環境配置、生產環境配置等