VUE模块化开发思路

构建工具：
vite
需求：
在多个项目下，低层框架可复用 ，样式可复用，模块可复用。

一、 项目示例
例如当前有两个项目：
aaAdmin项目a
twtighten 项目b
项目a和项目b中都有共同的低层逻辑，比如登录，权限验证，前端框架样式等等。
在这个两个项目中我们独立出一个公用项目adminCommon，a和b都引用这个项目。这样就便于管理
二、 项目实现
独立出的项目adminCommon，放在其他项目同级然后在项目a b中分别安装adminCommon作为模块
npm install ../adminCommon adminCommon 为项目文件夹
这个模块的包名称在adminCommon项目中的package.json里面设置如下：

{
  "type":"module",
  "name": "tianwu-ui-framework",//模块包名称，后面将通过模块名称引用
  "version": "3.0.0",
  "description": "系统管理模块",
  "author": "571115139@qq.com",//作者
   ......

最后直接在项目a b中，直接导入就可以使用 adminCommon 中的组件了

import Slide from 'tianwu-ui-framework/src/components/Slide'

其他 项目a、项目b，为了不改动路由，可以在页面里面套通用模块组件的方式来解决
例如：

<!--menu.vue 菜单加载页--> 
<template>
  <div>
   <menu-list></menu-list>
  </div>
</template>

<script setup name="menu">
import menuList from "tianwu-ui-framework/src/views/system/menu/index";
</script>

三、 其他遇到的问题(如有更好的解决方法可以联系我讨论一下)
问题一、资源路径问题：
本人目前用的vite构建项目，进行了别名配置”@“如下：

 '@': path.resolve(__dirname, './src')

使用 import “@//" 只对当前运行项目有效，如果公共模块要导入自身的模块 需要使用 相对路径"../"，如果使用”@“将会使用当前运行项目的路径，由此也可以巧妙的通过公共模块在不同的项目加载不同的数据，
例如，在公共模块导入系统基础设置可以使用”@“来导入：

index.vue
//在公共模块，加载系统的个性化设置，运行公共模块里面的逻辑
import navbarSettings from '@/settings' 
//在公共模块加载自身的模块
import { Navbar } from './components'

上述是渲染导航条需要引用的模块，在公共模块中引用当前接入项目的配置，再在公共模块的导航条进行渲染
问题二、如果在公共模块加载的路由，必须通过 引用公共模块的路由来使用，不能直接用 useRouter() 获取
例如：

import router from 'tianwu-ui-framework/src/router'  //可以正常使用(建议使用)
const router = useRouter();//打包后子模块中无法使用，父模块中可以使用（不建议使用）

问题三、开发环境下，外部资源权限问题，(当前项目调用公共项目的资源往往会有权限的问题)，使用vite添加如下配置:

server: {
      fs: {
        // Allow serving files from one level up to the project root
        strict: false,
      },
      ...
}

问题四、Pinia域问题，和router一样Pinia也有同样的问题，可以在main.js中注册单独注册一个当前模块的pinia，例如:

//main.js
import store from 'tianwu-ui-framework/src/store'
import moduleStore from '@/store'
..
...
app.use(moduleStore)
app.use(store)

//store/index.js
const moduleStore = createPinia()

export default moduleStore

四、 其他
对于模块的版本管理，可以像后端模块化一样，搭建一个私有的package库来管理项目打包后的版本，将模块项目根据版本打包上传到私有库。其他项目直接安装私有库的包
对于模块化框架，很多时候需要搭配后端使用，比如微服务架构等等，将每个微服务模块对应一个前端模块，这样就实现了整个前后端分离项目的模块化，所有模块按需加载，减少重复造轮子。