关于前端开发中导入导出
Posted GHUIJS
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于前端开发中导入导出相关的知识，希望对你有一定的参考价值。
前端开发中，导入导出有很多方面比如html中导入js、css，es6导入导出，scss、less中导入外部样式。是时候一一记录平时参考。
html中导入js、css
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="asset/css/framework.css" />
<script src="asset/js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>es6导入导出
导入到出Object
const name = 'wgh';
const age = 18;
export
name,
age
<template>
</template>
<script lang='ts' setup>
import name,age from './exportObject'
</script>导入导出Array
导出数组必须是默认导出，如：export default [name,age]
const name = 'wgh';
const age = 18;
export default [name,age]<template>
</template>
<script lang='ts' setup>
import person from './exportArray'
console.log(person)//['wgh', 18]
</script>export default和export的区别
- export default 是默认导出，只能导出一个模块对象，一个模块中只能使用一次,import引入时直接引入默认导出的变量名即可。
- export是导出，一个模块中可以使用多次,用于导出模块中的变量，对象，函数，类。
require(nodejs)
场用于路由动态导入，与export default相结合
import createRouter, createWebHashHistory, RouteRecordRaw from 'vue-router'
export const routes: Array<RouteRecordRaw> = [];
require.context('./modules', false, /\\.ts/).keys().forEach((RouteName, _index, _this) =>
routes.push(require.context('./modules', false, /\\.ts/)(RouteName).default);
)
const router = createRouter(
history: createWebHashHistory(),
routes
)
export default router;样式导入
脚本中导入(比如vue main 中，vue文件的script标签中)
import '/@/design/dastu/base.less';
import '/@/design/dastu/form.less';scss、less中导入
<style lang='less' scoped>
@import '@/assets/css/iconfont.css';//分号一定要写，不然报错
</style>亦可
<style lang='less' src='@/assets/css/iconfont.css' scoped></style>@import ~ 是什么意思
前面加 ~ 表示你后面的值为 alias, 然后就会去 webpack alias 配置中找相应的值, 然后拼接成最后的地址, 例如:
resolve:
alias:
"bootstrap": "xxx/xxx2",
"font-awesome": "yyy/yyy2",
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";
等同于
@import "xxx/xxx2/bootstrap/dist/css/bootstrap.min.css";
@import "yyy/yyy2/font-awesome/css/font-awesome.min.css";import * as xxx from
例如：
import * as common from '';这种写法是把所有的输出包裹到common对象里
vite import.meta.globEager实现自动化引入
const modules = import.meta.globEager('./modules/**/*.ts');
const routeModuleList: AppRouteModule[] = [];
Object.keys(modules).forEach((key) =>
const mod = modules[key].default || ;
const modList = Array.isArray(mod) ? [...mod] : [mod];
routeModuleList.push(...modList);
);组件导出命名
export default as SelfPicker from './src/SelfPicker .vue';导出变量重命名
import name,age from './exportObject';
import name as selfName,age as selfAge from './exportObject';以上是关于关于前端开发中导入导出的主要内容，如果未能解决你的问题，请参考以下文章