vue--實例化對象

 根目錄下的文件，這些是創建vue項目時生成的配置文件 

node_modules=> 里面的文件是項目開發過種中的各種依賴，我們暫且不用去深入了解；

public=> 主要放的是一些公用的文件，比如一些icon（即我們在收藏網址，網址前面的圖標識別）

src=> 這是我們整個項目的核心部分。我們所寫的代碼會全部放在這個文件夾下。

assets=> 存放的是一些靜態資源：比如圖片，css文件，js文件；

components=> 存放組件

views=> 存放所有的頁面

App.vue=> 根組件

main.js=> 入口文件

router.js=> 路由文件

store=> 根實例狀態存儲文件

 

首先打開入口文件main.js：

main.js作用：

在項目開發中，公共的組件，依靠等從此文件中導入

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

Vue.config.productionTip = false

接下來實例化vue對象

new Vue({
 router,  //路由
 store,   //狀態存儲
 render: h => h(App) //渲染組件
}).$mount('#app')

Vue=> 全局構造函數，new Vue里面的內容則是構造參數。router, store,render則是參數選項。

用到的參數選項需要在本文件頂部進行引入，否則會報錯。

$mount('#app') => 將實例化的對象掛載到#app這個節點上。

#app 是publick文件夾下的index.html入口文件里的一個id。也就是說，我們對App這個組件進行渲染后插入到這個節點里並顯示出來。

 

這是實例化另一個寫法

new Vue({
 el: "#app",
 router,
 store,
 render: h => h(App)
})

在實例化vue時，el和$mount基本相同。

 

原文鏈接：https://mp.weixin.qq.com/s/U18ICZAz7TwAs9ck8zulag