import和@import和require三者关系

1.@import是用于引入css文件并且只能写在css区域内（例：@import '...'或者@import url（'...'）），import用于可以引入css也可以引入js文件并且只能写在js区域内（例：import Vue from 'vue'或import 'utils/backend'或import 'element-ui/index.css'），require可以引入css，写在j s区域内（例：require('assets/css/index.css')）,也可以写在css内（待验证），也可以引入js（例：var model=require('...')）。
2.@import '...'等同于@import url('...'),import 'utils/backend'表示仅仅执行这个模块的代码，import Vue from 'vue'表示vue模块作为Vue来引入，import {mapGetters} from 'vue'表示vue中mapGetters这个方法作为mapGetters这个名称引入，import {lastName as surName} from 'Vuex'表示Vuex中lastName这个方法作为lastName重命名为surName这个名称引入。
3.import是es6写法，require是es5写法，编译的时候import最终会编译成require来执行，import在编译时调用，所以必须放在文件开头，require是运行时调用所以理论上是可以写在任何地方，前者的性能会好一些。

转载于:https://juejin.im/post/59eea9dbf265da432153386b