l20 / Vue Weather
基于vue.js 2.0的天气应用demo
Stars: ✭ 116
Projects that are alternatives of or similar to Vue Weather
Flowmaker
flowmaker: JS to SVG flowchart generation extension for Vscode in realtime written in typescript and also download the SVG through local node server. Extension:
Stars: ✭ 108 (-6.9%)
Mutual labels: svg
D3 Org Tree
A highly customizable org tree built with d3.js v5
Stars: ✭ 109 (-6.03%)
Mutual labels: svg
Bgrabitmap
📜 BGRABitmap graphics library made with Lazarus (Free Pascal).
Stars: ✭ 112 (-3.45%)
Mutual labels: svg
Protodot
transforming your .proto files into .dot files (and .svg, .png if you happen to have graphviz installed)
Stars: ✭ 107 (-7.76%)
Mutual labels: svg
Vue Graph
⚡️ Vue components based on the JUI chart available in Vue.js
Stars: ✭ 114 (-1.72%)
Mutual labels: svg
Butterfly
🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+1919.83%)
Mutual labels: svg
React Fast Charts
Blazing Fast Charting Library in React with loading time less than 50ms
Stars: ✭ 113 (-2.59%)
Mutual labels: svg
Scalable Vector Graphics Plugin For Paint.net
Paint.NET filetype plugin for loading SVG (Scalable Vector Graphics) and its compressed variant SVGZ files.
Stars: ✭ 109 (-6.03%)
Mutual labels: svg
Panzoom
A library for panning and zooming elements using CSS transforms 🔍
Stars: ✭ 1,593 (+1273.28%)
Mutual labels: svg
Python Altium
Altium schematic format documentation, SVG converter and TK viewer
Stars: ✭ 112 (-3.45%)
Mutual labels: svg
Jtop
SVG virtual desktop library that lets you build beautiful desktop like user interfaces.
Stars: ✭ 108 (-6.9%)
Mutual labels: svg
Svgdragtree
一个可以通过拖放 SVG 图标，来生成拥有树状结构的视图与数据的前端组件。 SDT example:
Stars: ✭ 113 (-2.59%)
Mutual labels: svg
Elemental2
Type checked access to browser APIs for Java code.
Stars: ✭ 115 (-0.86%)
Mutual labels: svg
Mocodo
Modélisation Conceptuelle de Données. Nickel. Ni souris.
Stars: ✭ 113 (-2.59%)
Mutual labels: svg
Svg Icon
👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
Stars: ✭ 112 (-3.45%)
Mutual labels: svg
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
在线演示
然后
本项目用于刚上手vue 2.0文档想找项目尝尝鲜的coder。
由于使用的免费天气API数据过于简单，导致某些功能只能自己实现或者未开发，比如日落日出时间，当然也可以计算自己实现，稍复杂。
开发环境为 windows 7 Chrome 57 node 6.10.1。
实现功能
-
[x] 阴历、阳历、天干地支日历
-
[x] 空气质量、当前天气温度风力风级、当前天气提示
-
[x] 未来24小时预报，预报数据API未提供这里为模拟数据
-
[x] 摄氏温度和华氏温度转换。
-
[x] 未来四天天气预报 、SVG贝塞尔曲线绘制
-
[x] 自动IP定位当前城市设置天气，全国县级以上城市检索设置。这里获取的全国城市城市数据为饿了么数据。
效果截屏
主界面
界面功能
城市列表
城市列表选择设置
八种纯CSS天气图标
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].