一、當(dāng)執(zhí)行 import vue from ‘vue’ 時(shí)發(fā)生了什么？

其實(shí)在 node.js 中，執(zhí)行 import 就相當(dāng)于執(zhí)行了 require，而 require 被調(diào)用，就會(huì)用到 require.resolve 這個(gè)函數(shù)來查找包的路徑，而這個(gè)函數(shù)在 nodejs 中會(huì)有一個(gè)關(guān)于優(yōu)先級(jí)的算法。

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

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

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

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

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

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

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

其實(shí)對(duì)于一個(gè) npm 包，內(nèi)部還有一個(gè)文件輸出的規(guī)則，先看下 node_modules/vue 下的文件結(jié)構(gòu)：
├── LICENSE
├── README.md
├── dist
├── package.json
├── src
└── types

對(duì)于 npm 包，require 的規(guī)則是這樣的：

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

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

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

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

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

二、 什么時(shí)候需要import Vue from ‘vue’

我認(rèn)為，在使用vue-router、vuex這類vue核心插件前，要先導(dǎo)入vue，再安裝。
因?yàn)閂ue-router并沒有將Vue打包進(jìn)自己的插件，所以注冊(cè)時(shí)使用的是外部Vue引入的方式。
待補(bǔ)充

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

三、單文件組件

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

這種方式在很多中小規(guī)模的項(xiàng)目中運(yùn)作的很好，在這些項(xiàng)目里 JavaScript 只被用來加強(qiáng)特定的視圖。但當(dāng)在更復(fù)雜的項(xiàng)目中，或者你的前端完全由 JavaScript 驅(qū)動(dòng)的時(shí)候，下面這些缺點(diǎn)將變得非常明顯：

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

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

1、 '.vue '文件

.vue文件，稱為單文件組件，是Vue.js自定義的一種文件格式，一個(gè).vue文件就是一個(gè)單獨(dú)的組件，在文件內(nèi)封裝了組件相關(guān)的代碼：html、css、js

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

2、 vue-loader

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

3、 webpack

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。