转载：
作者：非梦nj
链接：https://www.jianshu.com/p/ab778fde3b99
稍作删减。
Vue是轻量级前端框架，入门非常容易。现在 2.0正式发布了，其实起步更容易了。
这里记录一下Vue开发的简单步骤，方便大家起步。
源码：https://github.com/kevinqqnj/vue-tutorial
请使用新的template: https://github.com/kevinqqnj/flask-template-advanced
工具
-
Webstorm: 智能化的
javascript开发IDE，懒人开发必备 -
webpack: 打包和管理
js/css/...工具 -
vue-cli：
vue项目的脚手架工具，帮你搭好框架，快速开发 -
npm:
Node.js自带的package包管理工具
1. Webstorm
安装Vue插件： IntellVue, Vue.js 两个都装
JavScript：版本设置为 ECMAScript6
-
vue-cli搭建框架
- 首先从官方网站安装 node.js，会一并安装
npm工具。
C:\git\vue2new>node -v
v6.9.1
C:\git\vue2new>npm -v
3.10.8
C:\git\vue2new>npm upgrade -g # 如果是旧版，请升级
-
npm安装很慢（国外服务器），所以我们关联淘宝源，以后就可以用国内的cnpm安装webpack,vue-cli了，你懂的
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i webpack -g
cnpm i vue-cli -g
- 开始用
vue命令创建框架
C:\git> vue init webpack-simple vue2new # webpack-simple是模板之一
This will install Vue 2.x version of template.
For Vue 1.x use: vue init webpack-simple#1.0 vue2new
? Project name vue2new
? Project description A Vue.js project
? Author Kevin ZQ
vue-cli · Generated "vue2new".
To get started:
cd vue2new
npm install
npm run dev
上面结尾，已经提示如何运行第一个 Vue app了，用 cnpm代替 npm下载，会快许多
C:\git> cd vue2new
C:\git\vue2new> cnpm i # 用cnpm代替 npm下载。会根据 package.json下载模块到当前目录/node_modules下
C:\git\vue2new> npm run dev # 运行开发服务器
> vue2new@ dev C:\git\vue2new
> cross-env NODE_ENV=development webpack-dev-server --open --inline --hot
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
如果你看到浏览器自动打开窗口，显示如下 hello-world内容，恭喜你！
你的第一个 vue 2.0 app成功运行啦！
- Webstorm 界面里
- 左边：方便的查看目录结构，
- 左下角：快速调试
npm run dev / run build - 下方：方便地打开 Terminal终端窗口
P.S.
目录结构对照 Python Web开发，其实就是：
|- node_modules/ -> venv/ 虚拟环境
|- package.json -> requirements.txt
|- src/main.js -> init.py
|- src/App.vue -> /templates/base.html
