阮一峰在微博里说：

前端变化有多快？两年前，大家都用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
• vue-resource
• vue-strap （不依赖 BootStrap 的 JS 和 jQurey，但是仍需要 BootStrap 的 CSS。）
• vue-antd 蚂蚁金服 ant design 的 Vue 实现（不够完善，但是看起来比 vue-strap 好看些。
• vue-router（官方 router）

webpack

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

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 文件与内存中一致