快速组建vue3(固定眉头header框架)项目

功能

1. 快速搭建vue3项目(前提vue-cli已经安装)
2. 这个框架是：
   • header是固定在浏览器上方，Scrollbar的上下左右都不会改变header的位置，所有页面共用这个眉头
   • 你所有的项目都可以在这个眉头Header下进行二次开发。
   • header:
     • 查询、登录、用户信息、增添项目、帮助、黑夜，明亮模式切换、动态菜单等功能。
     • 这些功能都对应一个API函数接口，你只需要将你的函数写入对应的API函数内就完成项目设计。
3. TestCom.vue 为你提供了一个样张测试组件。帮助你可以直观看到项目设计和使用。
4. V2.0.0以上含翻译器
5. 菜单可放在浏览器左边或右边

A.创建、初始项目

 md header
 cd header
 npm init
 npm install @psweb/header 或
 yarn add @psweb/header

B.搭建项目

   将node_modules/@psweb/header/全部目录和文件拷贝到header中
   npm install
   运行 serve

三方依赖

   //第三方插件
   yarn add element-plus@next
   yarn add @element-plus/icons-vue
   yarn add @vueuse/[email protected]

注意事项

 1.项目使用
   Typescript
   sass
   router
   vue3 setup组合式   
   编程方式。
 2.组件
   HeaderCom.vue
   TestCom.vue
 3.API
   HeaderApi.ts
 4.非专业人员不建议采用平常的import引入方式。因为三方依赖和版本不同，
   使程序无法运行或不完整
 5.这是一个完整(header)项目上传保存在npm。使用时完整的取下来，复制拷
   贝就完成。三分钟内搞定一个多功能主页。
 6.这个时候node-modules/@psweb/header就成了多余项目，删除他，保证清洁。

实例

1.查询框输入test回车

   test the Sample 我的组件被调用

2.菜单选择Test

   test the Sample 我的组件被调用

3. 实例图片
4. 实例图片

修改菜单

1. src/api/HeaderApi.ts
   • 126行

修改管理菜单

1. src/components/HeaderCom.ts

• 30-50行

修改标题

1. src/components/HeaderCom.ts

• 8-12行

2. 7行 img src="../assets/logo.png" height="60" 是logo图标

增添组件

1. 在components下新建一个组件TestCom2.vue
2. 在router中新增test2项目

    在children: []中
     {
        path: '/test2',
        name: 'test2',
        meta: {
          title: 'Test2'
        },
        component: () => import(/* webpackChunkName: "test2" */ '../components/TestCom2.vue')
     }

修改完成后运行 serve