vue 里面 export/import js文件

vue要导入js文件的话，有一定的讲究，js文件本身也需要遵循一定的格式。

vue最大的特征，我看就是组件化开发。其中，import 各种vue组件已经是必要操作，不要太多。那么， js文件呢？以前，采用原生js或者jquery时代，引用外置js文件也是惯例。

一、想要import，必先export

首先，vue是可以导入js文件的，这也是组件化开发的一部分。不过，vue要导入js文件的话，有一定的讲究，js文件本身也需要遵循一定的格式。在vue中，一个js要想可以被import的话，它一定要export一些东西。以往，js文件只要被引入，里面的函数和变量，可以毫无困难地被外界访问。但在vue中，其实是ES6体系，js的函数和变量都是私有的，一定要export出来，才能被外界访问。

common.js

const NEW = 0
const SUBMITTED = 1
const SENDED = 2

const CONTENT = 'content'
const WHO = 'who'
const LIST = 'list'

export default {
  status: { NEW: NEW, SUBMITTED: SUBMITTED, SENDED: SENDED },
  statusTxt: ['新建', '未发送', '已发送'],
  step: { CONTENT: CONTENT, WHO: WHO, LIST: LIST }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

页面或组件中引用

import common from './common.js'

//只能访问 common.js中export出来的对象
let statusTxt = common.statusTxt[common.status.NEW]
1
2
3
4

二、export什么，就import什么

到目前为止，基本上我写的组件，或js，都是export default。但在es6语法中，export可以后接变量，或函数；一个组件或js，还可以有多个export。这里面有什么区别呢？同时，在页面或父组件中，import的时候，有2种形式：

import common from './common.js'
import { PickHandler } from './pick.js'
1
2

它们又有什么不同？
简而言之，export default每个js文件或组件，只能有一个；import的时候，不加花括号。其余的，可以多个export，import的时候需要加花括号。

test.js

export var name1 = '张三'
export function f1 () {
  return '王五'
}

var name2 = '李四'
function f2 () {
  return '钱六'
}
export { name2, f2 }

export default '都是王八蛋'
1
2
3
4
5
6
7
8
9
10
11
12

使用test.js

import all from './test.js'
import {name1,name2,f1,f2} from './test.js'

alert(`${name1}、${name2}、${f1()}、${f2()}，${all}！`)
1
2
3
4

参考文章：
认识Vue 的 export、export default、import

---

2022.07.01
有时候可以利用多重export机制带来书写上的简便。

比如，一个项目里，有多个公用组件挤在一个文件夹下，这时候可以在该文件夹下提供一个默认的索引文件index.js，里面将同目录下的组件都写在export名单里，那么我们在别的地方调用时，只需写一行就能引用到多个组件：

其中index.js

import Category from "./Category.vue";
import City from "./City.vue";
import InStyle from "./InStyle.vue";
import Uploader from "./Uploader.vue";

export { Category, City, InStyle, Uploader };
1
2
3
4
5
6

调用页面：

import { Category, City, InStyle } from "@/projects/components";
1

======================================
2022.09.07

可以全部引用，并使用别名

import * as tools from "@/utils";
1

import { app as app1, loginSetup } from "/public/config";
1

小兄弟，你知道茴香豆的“茴”字有多少种写法吗？