通常项目里会有很多的api与导入导出,为了避免过多而提高效率
vue3的使用过程中:可以读取文件然后异步的获取挂载在属性上面
虽然我知道按需的好处,但有时候很急效率至少就没办法考虑性能,
所以频繁的导出与import导入使用变量申明也是很拖慢进度。
虽然不提倡做法,但效率确实提高很多
import * as vue from 'vue'
import * as router from 'vue-router'
import * as store from './stores/index.js'
export const install = function (app){
app.config.globalProperties.$vue = vue
app.config.globalProperties.$router = router
app.config.globalProperties.$store = store.default
}
```javascript
Promise.all([installApi(app)]).then(res => {
app.config.globalProperties.$getApi = function(file_url){
return app.config.globalProperties.api[file_url]
}
app.mount(‘#app’)
})
import { ElMessage as message } from ‘element-plus’
/**
接口名称重复: ${name}
,
webpack做法也大同小异 require.context使用内置函数读取文件,使用vite和webpack自带的提供读取文件的功能,我们可以制作组件 指令,插件,函数,变量,字典,接口,表单各种的自动注册,大量的减少很多没必要的麻烦,通常我们的后台curd的过程很多时候都是复制一样的curd操作,其实多时候都需要封装表格表单来完成复用,注册全局,虽然有时候找不到东西在哪,但我觉得留一点说明注释应该可以解决问题。
```javascript
import { message } from 'ant-design-vue'
// const fs = require('fs')
const importAll = require.context('@/apis', true, /\.js$/)
/**
* api 接口集成对象初始化
*/
const api_list = Object.create(null)
function file_name(path) {
const s1 = /\/(.+).js$/
path.match(s1)
return RegExp.$1
}
importAll.keys().map((path) => {
const name =
file_name(path).split('/').length > 1
? file_name(path).split('/').join('_')
: file_name(path)
const router = importAll(path).default || importAll(path)
if (api_list[name]) {
message.error('接口文件名字请不要重复')
return
}
api_list[name] = router
})
/**
* api 接口集成对象
*/
// fs.writeFileSync('./apis/api.json', JSON.stringify(api_list), 'utf-8')
export const api = Object.freeze(api_list)