一、当执行 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'相关推荐

day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue学习笔记（5）（Vuex）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vuex 认识Vuex 官方解释:Vuex 是一个专为 Vue.js ...
Vue学习笔记（4）（Vue-router）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vue-router 0. 认识路由什么是路由? 路由是一个网络工 ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
VUE学习笔记------奕长苏
VUE学习笔记------奕长苏一.引言二.视图和数据的双向绑定 - - - v-model 三.组件 - - - component 四.其它一.引言本文为个人在学习vue时总结的学习笔记, ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
Vue学习笔记(十一)
1.Vue学习笔记(十一) 文章目录 1.Vue学习笔记(十一) 1.1Vue_配置代理_方式 1.1.0演示问题 1.1.1运行node server1 1.1.2运行node server2 1. ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
vue-resource post php,Vue学习笔记进阶篇——vue-resource安装及使用
简介 vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到 ...

Vue学习笔记（一）—— 什么时候需要import Vue from 'vue'

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

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

三、单文件组件

1、 '.vue '文件

2、 vue-loader

3、 webpack

Vue学习笔记（一）—— 什么时候需要import Vue from 'vue'相关推荐

最新文章

热门文章

Vue学习笔记（一）—— 什么时候需要import Vue from 'vue'

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

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

三、单文件组件

1、 '.vue '文件

2、 vue-loader

3、 webpack

Vue学习笔记（一）—— 什么时候需要import Vue from 'vue'相关推荐

最新文章

热门文章

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