一、當執行 import vue from ‘vue’ 時發生了什么？

其實在 node.js 中，執行 import 就相當于執行了 require，而 require 被調用，就會用到 require.resolve 這個函數來查找包的路徑，而這個函數在 nodejs 中會有一個關于優先級的算法。

import Vue from ‘vue’ 解析為 const Vue = require(‘vue’)。

require 判斷 vue 是否未 node.js 核心包，如我們常用的：path，fs 等，是則直接導入，否則繼續往下走。

vue 非 nodejs 核心包，判斷 vue 是否未 ‘/’ 根目錄開頭，顯然不是，繼續往下走。

vue 是否為 ‘./’、’/’ 或者 ‘…/’ 開頭，顯然不是，繼續往下走。

以上條件都不符合，讀取項目目錄下 node_modules 包里的包。

如果寫全的話是import vue from ‘…/node_modules/vue/list/vue.js’
這樣寫顯然十分的不方便，此時在webpack.base.conf.js中進行了定義，內置了一些選項，extenions:[’.js’,’.vue’,’.json’],意思是省略后面的后綴，由webpack來自動為我們加上。
如果名字比較長，還可以起個別名。
alias:{
‘@’:resolve(‘src’), //它的意思是在vue項目中，引入路徑的時候使用@即代表src文件夾，省去了…/…/…/的操作

到了第五步，import Vue from ‘vue’ 就找到了 vue 所在的實際位置了，那么問題來了，node_modules 下的 vue 是一個文件夾，而引入的 Vue 是一個javascript 對象，那它是怎么取到這個對象呢？

其實對于一個 npm 包，內部還有一個文件輸出的規則，先看下 node_modules/vue 下的文件結構：
├── LICENSE
├── README.md
├── dist
├── package.json
├── src
└── types

對于 npm 包，require 的規則是這樣的：

查找 package.json 下是否定義了main字段，是則讀取 main 字段下定義的入口。

如果沒有 package.json 文件，則讀取文件夾下的 index.js 或者 index.node。

如果 package.json、index.js、index.node 都找不到，拋出錯誤 Error: Cannot find module ‘some-library’。

那么看一下 vue 的 package.json 文件有這么一句：
{
…
“main”: “dist/vue.runtime.common.js”,
…
}

因此：
import vue from ‘vue’ 最后轉換為
const vue = require(’./node_modules/vue/dist/vue.runtime.common.js’)
而 vue.runtime.common.js 文件的最后一行是：module.exports = Vue;，就正好跟我們平時使用時的 new Vue({}) 是一致的，這就是 import vue from ‘vue’ 的過程了。

二、 什么時候需要import Vue from ‘vue’

我認為，在使用vue-router、vuex這類vue核心插件前，要先導入vue，再安裝。
因為Vue-router并沒有將Vue打包進自己的插件，所以注冊時使用的是外部Vue引入的方式。
待補充

src/router/index.jsimport Vue from 'vue' import Router from 'vue-router' src/plugins/http.jsimport axios from 'axios'

三、單文件組件

在很多 Vue 項目中，我們使用 Vue.component 來定義全局組件，緊接著用 new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素。

這種方式在很多中小規模的項目中運作的很好，在這些項目里 JavaScript 只被用來加強特定的視圖。但當在更復雜的項目中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：

全局定義 (Global definitions) 強制要求每個 component 中的命名不得重復
字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的
不支持 CSS (No CSS support) 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器，如 Pug (formerly Jade) 和 Babel

文件擴展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 webpack 或 Browserify 等構建工具。
vue單文件組件

1、 '.vue '文件

.vue文件，稱為單文件組件，是Vue.js自定義的一種文件格式，一個.vue文件就是一個單獨的組件，在文件內封裝了組件相關的代碼：html、css、js

.vue文件由三部分組成：<template>、<style>、<script><template>html</template><style>css</style><script>js</script>

2、 vue-loader

瀏覽器必須對.vue文件進行加載解析，此時需要vue-loader
類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的

3、 webpack

webpack是一個前端資源模板化加載器和打包工具，它能夠把各種資源都作為模塊來使用和處理
實際上，webpack是通過不同的loader將這些資源加載后打包，然后輸出打包后文件
簡單來說，webpack就是一個模塊加載器，所有資源都可以作為模塊來加載，最后打包輸出

梳理得太亂了，我也不造自己要說啥 😦

總結

以上是生活随笔為你收集整理的Vue学习笔记（一）—— 什么时候需要import Vue from 'vue'的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。