open-index/open-npm huggingface dataset:
npm package: @psweb/header
Description: 1.快速搭建vue3项目[固定前台眉头]
Latest version: 2.0.5

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

### 功能
 1. 快速搭建vue3项目(前提vue-cli已经安装)
 2. 这个框架是：
    - header是固定在浏览器上方，Scrollbar的上下左右都不会改变header的位置，所有页面共用这个眉头
    - 你所有的项目都可以在这个眉头Header下进行二次开发。
    - header:
        - 查询、登录、用户信息、增添项目、帮助、黑夜，明亮模式切换、动态菜单等功能。
        - 这些功能都对应一个API函数接口，你只需要将你的函数写入对应的API函数内就完成项目设计。
 3. TestCom.vue 为你提供了一个样张测试组件。帮助你可以直观看到项目设计和使用。
 4. V2.0.0以上含翻译器
 5. 菜单可放在浏览器左边或右边
### A.创建、初始项目
```jsx
 md header
 cd header
 npm init
 npm install @psweb/header 或
 yarn add @psweb/header
```
### B.搭建项目
```jsx
   将node_modules/@psweb/header/全部目录和文件拷贝到header中
   npm install
   运行 serve
```
### 三方依赖
```
   //第三方插件
   yarn add element-plus@next
   yarn add @element-plus/icons-vue
   yarn add @vueuse/core@9.3.0

```
### 注意事项 
```jsx
 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回车
```jsx
   test the Sample 我的组件被调用
```
2.菜单选择Test
```jsx
   test the Sample 我的组件被调用
```
3. [实例图片](https://npm.runkit.com/psweb-header/public/Header.jpg?t=1665061391708)
4. [实例图片](https://runkit-packages-raw.com/14.x.x/1665061391708/psweb-header/public/Header.jpg)

## 修改菜单
 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项目
```jsx
    在children: []中
     {
        path: '/test2',
        name: 'test2',
        meta: {
          title: 'Test2'
        },
        component: () => import(/* webpackChunkName: "test2" */ '../components/TestCom2.vue')
     }
```
## 修改完成后运行 serve
npm package: @psworld/resource-list
Description: ``` yarn install yarn dev ```
Latest version: 0.0.1

# Resoure List Project

## 실행 방법

```
yarn install
yarn dev
```

yarn dev 이후 인터넷 브라우저에서 http://localhost:5173 를 확인하시면 됩니다.

## 프로젝트 설명

- [solution.md](./solution.md) 파일에서 자세히 설명합니다.