vue中import和require的用法

其实用了这么久的vue，里面有很多东西都没有去细细整理分析，今天就整理一下

• Import(模块、文件)引入方式

　　1.引入js文件

　　　　在用的那一页，引入文件

　　　　Import tools from ‘./tools.js’

　　　　相应的js文件，必须暴露出来

　　2.引入组件

　　　　Import Hello from ‘./components/hello’

　　3.引入外部组件

　　　　npm install --save axios

　　　　npm install mint-ui -S

　　　　//引入全部组件

　　　　import Vue from ‘vue’

　　　　import Mint from ‘mint-ui’

　　　　Vue.use(Mint)

　　　　//按需引入部分组件

　　　　Import {Cell,Checklist} from ‘minu-ui’

　　　　Vue.component(Cell.name,Cell)

　　　　Vue.component(Checklist.name,Checklist)

　　4.引入外部js插件

　　　　Import cookies from ‘js-cookie’

　　　　以上来自：https://blog.csdn.net/weixin_38930535/article/details/80177445

• require.js的加载

　　require的使用非常简单，它相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……

再把require的结果赋值给某个变量，相当于把require和module.exports进行平行空间的位置重叠

　　优点：

　　　　1）实现js文件的异步加载，避免网页失去响应；

　　　　2）管理模块之间的依赖性，便于代码的编写和维护。

　　引入：

　　　　require('./a')(); // a模块是一个函数，立即执行a模块函数

　　　　var data = require('./a').data; // a模块导出的是一个对象

　　　　var a = require('./a')[0]; // a模块导出的是一个数组

　　　　在vue的js引入图片，就需要使用require（“路径”）进来

　　注：

　　　　从理解上，require是赋值过程，import是解构过程，当然，require也可以将结果解构赋值给一组变量，但是import在遇到default时，和require则完全不同：

　　　　var $ = require('jquery');

　　　　import $ from 'jquery'

　　　　是完全不同的两种概念。

　　　　引自：https://blog.csdn.net/Deft_MKJing/article/details/80388770

 

　　require和import分别使用在：

• require 是赋值过程并且是运行时才执行，也就是异步加载。
• require可以理解为一个全局方法，因为它是一个方法所以意味着可以在任何地方执行。
• import 是解构过程并且是编译时执行。
• import必须写在文件的顶部。

　　require和import的优缺点比较：

　　require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，而import只需要依据import中的接口在编译时引入指定模块所以性能稍高。