• 关于前端开发中导入导出

    前端开发中，导入导出有很多方面比如html中导入js、css，es6导入导出，scss、less中导入外部样式。是时候一一记录平时参考。

    html中导入js、css

    1. <html>
    2. 	<head>
    3. 		<meta charset="UTF-8">
    4. 		<link rel="stylesheet" type="text/css" href="asset/css/framework.css" />
    5. 		<script src="asset/js/main.js" type="text/javascript" charset="utf-8"></script>
    6. 	</head>
    7. 	<body>
    8. 	</body>
    9. </html>

    es6导入导出

    导入到出Object

    1. const name = 'wgh';
    2. const age = 18;
    3.  
    4. export {
    5.     name,
    6.     age
    7. }
    1. <template>
    2. </template>
    3. <script lang='ts' setup>
    4. import { name,age } from './exportObject'
    5. </script>

    导入导出Array

    导出数组必须是默认导出，如：export default  [name,age]

    1. const name = 'wgh';
    2. const age = 18;
    3.  
    4. export default  [name,age]
    1. <template>
    2. </template>
    3. <script lang='ts' setup>
    4.     import person from './exportArray'
    5.     console.log(person)//['wgh', 18]
    6. </script>

    export default和export的区别

    • export default 是默认导出，只能导出一个模块对象，一个模块中只能使用一次,import引入时直接引入默认导出的变量名即可。
    • export是导出，一个模块中可以使用多次,用于导出模块中的变量，对象，函数，类。

    require(nodejs)

    场用于路由动态导入，与export default相结合

    1.   import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
    2.  
    3.   export const routes: Array<RouteRecordRaw> = [];
    4.  
    5.   require.context('./modules', false, /\.ts/).keys().forEach((RouteName, _index, _this) => {
    6.     routes.push(require.context('./modules', false, /\.ts/)(RouteName).default);
    7.   })
    8.  
    9.   const router = createRouter({
    10.     history: createWebHashHistory(),
    11.     routes
    12.   })
    13.  
    14.   export default router;

     样式导入

    脚本中导入(比如vue main 中，vue文件的script标签中)

    1. import '/@/design/dastu/base.less';
    2. import '/@/design/dastu/form.less';

    scss、less中导入

    1. <style lang='less' scoped>
    2.     @import '@/assets/css/iconfont.css';//分号一定要写，不然报错
    3. </style>

    亦可

    <style lang='less' src='@/assets/css/iconfont.css' scoped></style>

    @import ~ 是什么意思

    前面加 ~ 表示你后面的值为 alias, 然后就会去 webpack alias 配置中找相应的值, 然后拼接成最后的地址, 例如:

    1. resolve: {
    2.     alias: {
    3.         "bootstrap": "xxx/xxx2",
    4.         "font-awesome": "yyy/yyy2",
    5.     }
    6. }
    1. @import "~bootstrap/dist/css/bootstrap.min.css";
    2. @import "~font-awesome/css/font-awesome.min.css";
    3. 等同于
    4.  
    5. @import "xxx/xxx2/bootstrap/dist/css/bootstrap.min.css";
    6. @import "yyy/yyy2/font-awesome/css/font-awesome.min.css";

     import * as xxx from

    例如： 

    import * as common from '';

    这种写法是把所有的输出包裹到common对象里

    vite import.meta.globEager实现自动化引入

    1. const modules = import.meta.globEager('./modules/**/*.ts');
    2.  
    3. const routeModuleList: AppRouteModule[] = [];
    4.  
    5. Object.keys(modules).forEach((key) => {
    6.   const mod = modules[key].default || {};
    7.   const modList = Array.isArray(mod) ? [...mod] : [mod];
    8.   routeModuleList.push(...modList);
    9. });

    组件导出命名

    export { default as SelfPicker } from './src/SelfPicker .vue';

  • 相关阅读:
    python创建sqlite，并使用flask-sqlalchemy连接
    【MyBatis源码分析】三、MyBatis的核心对象及其作用
    指向指针的指针pp指向指针p
    WPF 入门笔记 - 02 - 布局综合应用
    nodejs+vue 电子书阅读系统
    前 K 个高频元素问题
    通过循环查找完数
    前端的规范
    不可重复读和幻读区别
    MySQL报错 table “xxx” doesn‘t exit
  • 原文地址：https://blog.csdn.net/m0_43599959/article/details/125531840