// const util = require('@/utils/util.js');
import util from '@/utils/util.js';
// import * as utils from '@/utils/util.js';
export default {
data() {
return {
title: 'Hello'
onLoad() {
console.log(util);
methods: {
2.导入所有模块且重命名空间
import * as utils from '@/utils/util.js';
export default {
data() {
return {
title: 'Hello'
onLoad() {
console.log(utils);
methods: {
3.导入单个模块内的函数
import {
console1
} from '@/utils/util.js';
export default {
data() {
return {
title: 'Hello'
onLoad() {
console1();
// console.log();
methods: {
4.导入多个模块函数
import {
console1,
console2
} from '@/utils/util.js';
export default {
data() {
return {
title: 'Hello'
onLoad() {
console1();
console2();
// console.log();
methods: {
5.导入时重命名模块内的函数(主要是模块函数名过长进行重命名,可单个或多个命名)
import {
console1 as console11,
console2 as console22
} from '@/utils/util.js';
export default {
data() {
return {
title: 'Hello'
onLoad() {
console11();
console22();
// console.log();
methods: {
// 动态加载,vue不支持这种方式。React支持,但vue支持组件懒加载(按需)
// import('@/utils/util.js')
// .then((module) => {
// // Do something with the module.
// console.log(module)
// })
methods: {
8. import { export1 , export2 as alias2 , [...] } from "module-name"
[...]代表可选参数,无其它意义
五、require使用
1. 模块全部导入
const util = require('@/utils/util.js');
export default {
data() {
return {
title: 'Hello'
onLoad() {
console.log(util);
methods: {
2. 单个模块内的函数导入
const util = require('@/utils/util.js').console1;
export default {
data() {
return {
title: 'Hello'
onLoad() {
console.log(util);
methods: {
六、主流模块(CommonJS和AMD以及CMD规范)
可以详细看看以下两篇文章:
1. https://www.jianshu.com/p/dd08f4095a49
2. https://www.cnblogs.com/libin-1/p/7127481.html