一、当执行 import vue from ‘vue’ 时发生了什么？

其实在 node.js 中，执行 import 就相当于执行了 require，而 require 被调用，就会用到 require.resolve 这个函数来查找包的路径，而这个函数在 nodejs 中会有一个关于优先级的算法。

1. import Vue from ‘vue’ 解析为 const Vue = require(‘vue’)。
2. require 判断 vue 是否未 node.js 核心包，如我们常用的：path，fs 等，是则直接导入，否则继续往下走。
3. vue 非 nodejs 核心包，判断 vue 是否未 ‘/’ 根目录开头，显然不是，继续往下走。
4. vue 是否为 ‘./’、’/’ 或者 ‘…/’ 开头，显然不是，继续往下走。
5. 以上条件都不符合，读取项目目录下 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 的规则是这样的：

1. 查找 package.json 下是否定义了main字段，是则读取 main 字段下定义的入口。
2. 如果没有 package.json 文件，则读取文件夹下的 index.js 或者 index.node。
3. 如果 package.json、index.js、index.node 都找不到，抛出错误 Error: Cannot find module ‘some-library’。

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

4. 因此：
   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就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出

梳理得太乱了，我也不造自己要说啥 😦