Vue学习笔记（一）—— 什么时候需要import Vue from 'vue'
一、当执行 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插件一样也能做到 ...
最新文章
- SpringBoot——项目搭建、整合Mybatis、整合redis（集群）
- 【深度学习】研究揭秘：神经网络越大、表现越好的“神秘力量”
- php 淘宝客接口开发,如何使用PHP的curl函数调用维易淘客接口
- 处理器指令编码可重定义的方法_从零开始设计四位栈处理器（2）——结构与指令集...
- 乐高机器人教室布置图片大全_圣诞节手抄报内容简单图片漂亮
- 读入10个数，显示互不相同的数的数目，并以输人的顺序输出
- python import logging日志
- 【Elasticsearch】Elasticsearch 索引 索引模板 生命周期 关系
- java数组整组处理_java – 使它漂亮：同时处理数组
- python带cookie登录
- 神奇DP [HNOI2004] 打砖块
- 算法：判断二叉树是否包含链表Linked List in Binary Tree
- nonebot qq机器人经常被封号怎么办？
- 《阿里巴巴大数据实践-大数据之路》读后感言
- linux mbr gpt 区别,MBR、GPT的结构和区别
- 英语四级考试在即，这几个超有用的App赶紧用起来，顺利考过四级
- Linux中的setuid简介
- 关于加强销售费用管理的探讨
- Work Tasks
- Hbook笔记 - 免费、简约、大方的Markdown笔记