# start-brower

**Repository Path**: akex9527/start-brower

## Basic Information

- **Project Name**: start-brower
- **Description**: vue搭建简洁的浏览器起始页,欢迎使用~~~
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://www.akexc.com
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-07
- **Last Updated**: 2022-10-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <img src="https://img.shields.io/badge/nodej-%5E14-green" alt="nodejs">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
    <img src="https://img.shields.io/badge/vue%2Fcli-%3E4.5-red" alt="@vue/cli">
    <img src='https://img.shields.io/badge/vue-%5E2.6.11-blue'alt='@vue'/>
    <img src='https://img.shields.io/badge/npm-%5E6.14.15-orange' alt='npm' />
    <img src='https://img.shields.io/badge/yarn-%5E1.22.17-pink' alt='yarn' />
    <img src="https://img.shields.io/badge/release-v1.0.1-red" alt= release">
</p>

## 一、项目描述

- 一个基于 Vue 框架, axios 请求库的 " **个人 Edge 主页** ".通过 Vue 组件实现数据双向绑定, axios 请求开放接口实现上网搜索功能.主页非常简洁,只有搜索功能, 其余的功能感觉也是画蛇添足.
- <a href='http://www.akexc.com' target='_blank'>线上地址<a/>

友情链接：

1.  [Vue 官方文档](https://cn.vuejs.org/v2/guide/instance.html)
2.  [Axios 官方文档](https://www.axios-http.cn/docs/intro)
3.  [jsonp 教程](https://www.runoob.com/json/json-jsonp.html)
4.  [项目 gitee 地址](https://gitee.com/KYALEX/SLM-INDEX)
5.  [我的博客](http://akexc.com)

项目展示

<video src='http://upload.akexc.com/www.akexc.com/202203091224.mp4'> </video>

---

## 二、主要文件介绍

| 文件                         | 作用/功能                                          |
| ---------------------------- | -------------------------------------------------- |
| main.js                      | 主目录文件，引入 全局 global.css, reset.css 等文件 |
| views/ Home.vue              | 项目主页                                           |
| assets                       | 静态资源目录，css, images,icons 目录               |
| components                   | 封装的组件                                         |
| components ----chioce_engine | 选择搜索引擎组件                                   |
| api                          | 处理 http 请求                                     |
| api ------jsnop              | 封装 jsnop 挂载到 axios, 解决生产环境跨域问题      |

---

## 三、使用介绍

### 启动项目

1. **安装 node,npm 或 yarn**
2. git clone https://gitee.com/akex9527/start-brower.git && cd SLM_INDEX
3. **npm i 或 yarn install**
4. 调试:**npm run dev 或 yarn dev**
5. 打包:**npm run build 或 yarn build**

- 提示:

  - 如果报错, 请检查 **npm** , **node**, **vue/cli** 版本

---

### 请求数据

此项目为纯前端项目, 暂时未搭建后端服务,所以选择**jsnop**解决跨域.
当然你也可以使用以下两种解决方案(用于生产环境)

#### 使用 Nginx 进行跨域配置

- [可视化配置 nginx](https://www.nginxedit.cn/)
- [nginx 中文文档](https://www.nginx.cn/doc/)

#### 搭建后端服务,由后端请求目标 Api 的数据

- [koa 文档](https://koa.bootcss.com/)
- [Node.js 文档](http://nodejs.cn/)

* 前后端业务如图
  ![yewu](/src/assets/images/readme/yewu.png)

* **Koa** 配置跨域

```js
// 中间件 - 跨域
app.use(async (ctx, next) => {
  // 设置允许那些源可以跨域请求,*代表所有源
  ctx.set('Access-Control-Allow-Origin', '*')
  ctx.set('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  ctx.set('Access-Control-Allow-Headers', 'Content-Type')
  // 允许传递证书---允许传递cookie
  ctx.set('Access-Control-Allow-Credentials', 'true')
  await next()
})
```

---

## 四、更新情况

### 优化

- 适配移动端
- 将适配方案从 rem 改成 vw
- 抽离 **jsonp** 成模块引入
- 使用七牛云 cdn
- 浏览器强缓存

### 修复

- 修复 移动端 search 和 tips 组件宽高错乱的问题
- 修复 tips 无数据还继续显示的问题

---

## 五、未来

- 使用 TS +Vue3 + vite 改写
- 搭建后端服务
- 性能优化与多端适配

此项目是个人的作品，难免会有问题和 BUG.欢迎 issue 和 pull，非常感谢！

<center style='color:#1abc9c;font-size:20px'> 学无止境</center>
<center style='color:#2980b9;font-size:20px'> 宁静致远</center>

---