Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/l20/vue-weather
基于vue.js 2.0的天气应用demo
https://github.com/l20/vue-weather
svg vue vue-weather
Last synced: 3 months ago
JSON representation
基于vue.js 2.0的天气应用demo
- Host: GitHub
- URL: https://github.com/l20/vue-weather
- Owner: l20
- Created: 2017-04-30T13:54:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-01T12:36:46.000Z (over 7 years ago)
- Last Synced: 2024-07-30T13:13:26.394Z (6 months ago)
- Topics: svg, vue, vue-weather
- Language: CSS
- Homepage:
- Size: 7.83 MB
- Stars: 133
- Watchers: 4
- Forks: 37
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-vue - vue-weather - 基于vue.js 2.0的百度天气应用 (Demo示例)
- awesome-vue - vue-weather - weather?style=social) - 基于vue.js 2.0的百度天气应用 (Demo示例)
- awesome-github-vue - vue-weather - 基于vue.js 2.0的百度天气应用 (Demo示例)
- awesome - vue-weather - 基于vue.js 2.0的百度天气应用 (Demo示例)
README
# vue-weather
> 基于vue.js 2.0的百度天气应用。
# 说明
在看完两遍完官方文档之后仍然感觉云里雾里，知其然不知其所以然。请教了高手之后人家都说学习新东西的最好方法不就是学到了之后就要用么。边学边用，根据项目需要学才是最快上手的，但有没有什么适合新手的项目参考，想了几天打算用vue来仿一个简单的天气应用，于是就出现了这个小应用,巩固所学。项目适合刚学完vue想实践的新手，高手略过吧！
# 技术栈
* vue2.0
* vue-router
* webpack
* ES6/7
* Axios
* less
* linq.js
* svg
# 运行环境
> nodejs 6.0 稳定版 npm 3.10
### 安装
```
git clone https://github.com/alanWongsGithub/vue-weather.git
cd weather/
npm install
```
### 运行
```
npm run dev
```
### 上线
```
npm run build
将huild之后的vue-weather/目录上传至服务器
cd vue-weather/
//用node启动:
node server.js
//用pm2管理启动:
pm2 start server.js
//用forever管理启动
forever start server.js
```
### [在线演示](http://weather.alphagoo.cn)
# 然后
> 本项目用于刚上手vue 2.0文档想找项目尝尝鲜的coder。
> 由于使用的免费天气API数据过于简单，导致某些功能只能自己实现或者未开发，比如日落日出时间，当然也可以计算自己实现，稍复杂。
> 开发环境为 windows 7 Chrome 57 node 6.10.1。
# 实现功能
- [x] 阴历、阳历、天干地支日历
- [x] 空气质量、当前天气温度风力风级、当前天气提示
- [x] 未来24小时预报，预报数据API未提供这里为模拟数据
- [x] 摄氏温度和华氏温度转换。
- [x] 未来四天天气预报 、SVG贝塞尔曲线绘制
- [x] 自动IP定位当前城市设置天气，全国县级以上城市检索设置。这里获取的全国城市城市数据为饿了么数据。
## 效果截屏
#### 主界面
#### 界面功能
#### 城市列表
#### 城市列表选择设置
#### 八种纯CSS天气图标
    