佟年给韩商言做的网站,彩票网站建设服务,网站数据分析报表,网站建设与管理是课程一、当执行 import vue from ‘vue’ 时发生了什么#xff1f; 其实在 node.js 中#xff0c;执行 import 就相当于执行了 require#xff0c;而 require 被调用#xff0c;就会用到 require.resolve 这个函数来查找包的路径#xff0c;而这个函数在 nodejs 中会有一个关于…一、当执行 import vue from ‘vue’ 时发生了什么 其实在 node.js 中执行 import 就相当于执行了 require而 require 被调用就会用到 require.resolve 这个函数来查找包的路径而这个函数在 nodejs 中会有一个关于优先级的算法。 import Vue from ‘vue’ 解析为 const Vue require(‘vue’)。require 判断 vue 是否未 node.js 核心包如我们常用的pathfs 等是则直接导入否则继续往下走。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-routersrc/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、scripttemplatehtml/templatestylecss/stylescriptjs/script2、 vue-loader 浏览器必须对.vue文件进行加载解析此时需要vue-loader 类似的loader还有许多如html-loader、css-loader、style-loader、babel-loader等 需要注意的是vue-loader是基于webpack的 3、 webpack webpack是一个前端资源模板化加载器和打包工具它能够把各种资源都作为模块来使用和处理 实际上webpack是通过不同的loader将这些资源加载后打包然后输出打包后文件 简单来说webpack就是一个模块加载器所有资源都可以作为模块来加载最后打包输出 梳理得太乱了我也不造自己要说啥
