psweb-header v1.2.3

关于 vue3 前台共享眉头 header 框架

功能

1. 你所有的项目都可以在这个眉头Header下进行二次开发。
2. header具有项目查询、登录、用户信息、增添项目、帮助、黑夜，明亮模式切换、动态菜单的加入等功能。这些功能都对应一个API函数接口，你只需要将你的函数写入对应的API函数内就完成项目设计。
3. TestCom.vue 为你提供了一个样张测试组件。帮助你可以直观看到项目设计和使用。
4. 你也可以用你的HeaderApi.ts代替他。注意接口名称即可。
   • 删除node_modules中psweb-header/api目录，然后在你的项目中加入src/api/HeaderApi.ts
5. 下载完成后，什么都不要做，让你的代理服务器直接指向dist物理路径，然后开启服务器，就能见到效果。

装配下载

 md header

 cd header

 npm init

 npm install psweb-header

   或

 yarn add psweb-header

代理服务器

   这里以IIS为例
   在基本设置中：物理路径  \node_modules\psweb-header\dist
   运行服务器 OK  (当然我们不建议这样做，仅仅是感觉一下。)

copy \node_modules\psweb-header 到header项目中

项目安装 开发

yarn install

//第三方插件
yarn add element-plus@next
yarn add @element-plus/icons-vue
yarn add @vueuse/core@9.3.0

用于开发的编译和热重载

yarn serve

编译和最小化生产

   yarn build  

   这里以IIS为例
   在基本设置中：物理路径  header\dist
   运行服务器 OK

注意

1. 如果你的前端由代管服务器运行

• 代管服务器可能在浏览刷新时会告诉你，子目录下的路由404。这时你可能就要对你的服务器进行一些特定的设置来解决。因为这里我们只谈前端的header，没有谈代管服务器，所以这里只是注解一下。

2. 项目采用Typescript和sass、vue3组合式风格编写。

实例图片