阮一峰在微博里说：

前端变化有多快？两年前，大家都用Grunt构建，去年用Gulp + Browserify构建，今年用Webpack构建，明年可能会使用纯ES6的构建工具。每变一次，前面的那些工具就全没用，都白学。要知道，这些工具每一个都是软件系统，单单Grunt就有4千个插件，然而全没用了。

nodejs相关

国内使用npm有时候不太顺利，可以考虑使用淘宝的镜像。

npm install -g webpack –registry=http://registry.npm.taobao.org

vuejs

文档：vuejs.org.cn
在线体验
官方索引: awesome-vue
开发工具:
命令行工具 vue-cli （面向组件开放的项目都建议使用这个官方工具初始化）
命令行工具Webpack 插件 vue-loader ： for single file Vue components * vue-loader-example * vue组件化开发初体验-示例vue-loader-example学习记录
- 源码:dingyiming/learn-Js-vuejs
- vue文件将由vue-loader进行加载，.vue内同时包含html、css、js源码，使组件的独立，组件之间可以尽可能地解耦，便于开发维护
命令行工具Browserify 插件 vueify
命令行工具Chrome 插件 vue-devtools
xhr
vue-resource
UI 库：
vue-strap （不依赖 BootStrap 的 JS 和 jQurey，但是仍需要 BootStrap 的 CSS。）
vue-antd 蚂蚁金服 ant design 的 Vue 实现（不够完善，但是看起来比 vue-strap 好看些。
路由
vue-router（官方 router）

webpack

目前前端领域工具异常丰富，webpack是黏合它们的胶水，可以作为入口，如果手动拼接，极其琐碎

demo

examples
ruanyf/webpack-demos：建议以这个作为入门

教程

vuejs与webpack相关案例

vue-hackernews

HackerNews clone with Vue.js

vuejs官方的案例

构建大型应用组件化：组件（Component）是 Vue.js 最强大的功能之一
sudo npm install –registry=http://registry.npm.taobao.org
网站的信息来自: wss://s-usc1c-nss-136.firebaseio.com/.ws?v=5&ns=hacker-news
- 用到了firebase
- 调试wss
  - python3， pip install websocket
  - wsdump.py

qingcheng

qingcheng是python-china的前端

qingcheng的后端为zerqu,基于flask写的，专注于提供api

not a forum, it is an API based application

开发

mac下，nodejs升级为v5.0,nodejs太旧会有问题

开始：

sudo npm install
make dev

注意: webpack-dev-server

生产环境

make build
python -m SimpleHTTPServer 8000

vue-demos

sudo npm install sass-loader node-sass webpack –save-dev –registry=http://registry.npm.taobao.org
sudo npm install
npm run dev
- 会解释为：webpack-dev-server –inline –hot –config webpack.dev.conf.js
npm run build

demo-Vue-sign

用vue组件化做个简单的注册登陆SPA页面示例

附

webpack-dev-server

webpack 提供了 webpack-dev-server 解决实时刷新页面的问题，同时解决实时构建的问题

js 文件修改
webpack-dev-server 监控到变化
webpack 在内存中重新构建 bundle.js
webpack-dev-server 保证页面引用的 bundle.js 文件与内存中一致

vuejs与webpack学习笔记

文章目录