用Vue3.0 开发一款导入浏览器书签的在线书签（上）

🤵介绍（取名）

👉👉👉【红隼书签】是一款简洁的在线书签导航网站。

名字的由来其实是，本着保护动物，爱护动物的初心，想到起一个鸟类的名称，其实最开始想了很多名字，小詹书签，麻雀书签等。

【麻雀-sparrow】

【红隼-kestrel】

但是听起来都不够响亮。后来 皮皮 同学，帮我想了一个食肉的，有点凶猛的又有点呆萌的鸟类的名字，红隼【英文翻译：kestrel】，点个赞。于是就有了这个名字啦，但是听起来也是不错的。于是开发计划开始啦。

数据来源（印象中文）

他的默认数据为我选的是印象中文的web导航数据；其实我自己哪里收藏了更多的导航数据，但是很多设计到公司的一些访问网站。想想还是算了，于是就用了印象中文的数据。它可以修改数据；全局搜索筛选功能；单页面完成逻辑非常简单，新手小白也能完成二次修改开发；采用granim插件完成背景动画；可选择更多动画效果；炫酷光晕背景动画效果。

💹 功能/特色（炫酷光晕背景动画效果，可导入浏览器数据存入LeanCloud）

• ✅ 1.同步印象中文的web导航数据；书签支持新增、修改和删除
• ✅ 2.全局搜索筛选功能；本地离线数据持久化，书签增删改查
• ✅ 3.可登录获取保存在leancloud里面的书签数据，再不用担心书签数据丢失了
• ✅ 4.采用granim插件完成背景动画；可选择更多动画效果；
• ✅ 5.支持导入浏览器书签数据（Google，火狐），并存入LeanCloud;
• ✅ 6.可注册leanCloud并修改appId和appKey；自己部署该书签；
• ✅ 7.采用Vue3.0 Composition API；也是一个学习Vue3.0 的学习项目；希望帮助

更多正在学习VUe 3.0的朋友；

📝 正在开发的功能

• 👉自定义上传背景图片
• 👉自定义背景动画效果
• 👉自定义工具栏
• 👉导入解析浏览器书签，支持修改、删除并存入LeanCloud
• 👉书签支持多种布局样式（卡片，列表，树形书签结构等）
• 👉支持修改整个书签的图标；目前使用的是红点图标，也挺好看的；
• ...

💌 网址书签

========⚡⚡⚡

红隼书签

注意：👉本项目会持续新增功能，但持续维护。如使用中发现问题，请留言或者提交 issue 。谢谢！！！

📚安装步骤

• 1.克隆项目 https://gitee.com/zhanhongzhu...
• 2.进入项目目录 npm install
• 3.启动项目npm run serve
• 4.打开浏览器即可 localhost:8080 就可以看到界面啦；
• 5.打包命令 npm run build

🚀 效果

😄 源码地址

完全开源，大家可以随意研究，二次开发。当然还是十分欢迎大家点个Star⭐⭐⭐

👉👉源码链接(gitee)       👉👉源码链接(github)

项目结构

├── src 
     ├── Api      // 存放接口
     │    └──common.js  // leancloud-storage公共接口函数封装
     │    └──user.js   // leancloud-storage 登录、登出接口
     ├── assets      // 存放静态资源
     │    └──Json    // 静态数据源json数据
     │    └──svg    // 工具栏图标
     ├── components  //存放组件
     │    └──Dialog.vue  // 新增、修改书签
     │    └──Login.vue    // 登录弹窗
     ├── APP.vue
     └── main.js