# coluorsStickyNote.gitee.io

**Repository Path**: flyingwxb/coluorsStickyNote.gitee.io

## Basic Information

- **Project Name**: coluorsStickyNote.gitee.io
- **Description**: 基于vue2.x和typescript的彩色便利贴
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://flyingwxb.gitee.io/coluorsstickynote.gitee.io
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-07-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目预览
项目打包部署到了github和码云上。    

<a href="https://flyingwxb.gitee.io/coluorsstickynote.gitee.io" target="_blank">码云版预览地址</a>（国内访问会很快）    
<a href="https://deardreamweb.github.io/coluorsStickyNote.github.io" target="_blank">github版预览地址</a>（国内访问可能会有点慢，请耐心等待） 


# 多彩便利贴
基于Vue2.x和TypeScript开发的在线便利贴，名为多彩便利贴。  
- 主要使用了Vuex配合TypeScript以及LocalStorage来对数据进行储存和获取。
- 采用了响应式布局，对移动端也有相应的适配。
- 用瀑布流布局的方式来让便利贴能够更加美观的展现出来。 
- 采用了字体颜色和背景颜色反色技术展现便利贴效果。
- 有添加便利贴，修改便利贴的样式和内容，可以自由选择便利贴的背景颜色，删除便利贴，查看分类等功能。
  
# 核心技术栈
- Vue
- TypeScript
- Element-ui
- Vuex
- Html5
- ES6
- Scss
- Css3

## 项目搭建
```
npm install
```

### 项目运行
```
npm run serve
```
# 项目效果
## 首页界面
![首页界面](https://images.gitee.com/uploads/images/2020/0727/094157_2e1e0ab7_5736276.png)

## 添加界面
![添加界面](https://images.gitee.com/uploads/images/2020/0727/094157_787f7222_5736276.png)

## 移动端首页界面
![移动端添加界面](https://images.gitee.com/uploads/images/2020/0727/094157_505bcaf3_5736276.png)

## 移动端添加界面
![移动端添加界面](https://images.gitee.com/uploads/images/2020/0727/094157_1c9b1a06_5736276.png)