共计 1919 个字符，预计需要花费 5 分钟才能阅读完成。
原理
页面 url 构成
http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace
http:// 页面使用的协议
www.xxx.com 页面所属域名
/index.html 文件名称（路径）
?name=&old= get 方式传递的参数
#mylove/// 页面的锚点前 4 项发生改变时，会触发跳转或刷新，而锚点发生变化时，并不会跳转和刷新，因此，几乎所有的 spa 都是利用锚点来实现路由转换的。vue 的 url 结构：http://localhost:8080/#/setting/task
RESTful 接口风格
我们所做的大多数的操作，都是对数据库的四种操作“增删改查”，对应到的接口操作：
post 插入新数据
delete 删除数据
put 修改数据
get 查询数据约定，并非强制。表层看，除 get 外其他方式都一样，深层看，所有方式都一样，统一规范，做了约定。
安装 vue-cil 是 vue 的脚手架工具，先全局安装 vue-cil
sudo npm install -g vue-cli
cd vue-test
Vue init webpack vuedemo
cd vuedemo
npm install
npm run dev
Js standard 语法规则
使用两个空格缩进
字符串使用单引号
不再有冗余变量
无分号
行首不要以 ([ ` 开头
关键字后加空格
函数名后加空格
使用 ===，摒弃 ==
处理 node 中回调传递回来的 err
文件末尾留空行
使用全局变量，加上 window. document 和 navigator 除外
项目目录及文件结构
├── README.md // 项目说明文档├── node_modules // 项目依赖包文件夹├── build // 编译配置文件，一般不用管│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── vue-loader.conf.js│ ├── webpack.base.conf.js│ ├── webpack.dev.conf.js│ └── webpack.prod.conf.js├── config // 项目基本设置文件夹│ ├── dev.env.js // 开发配置文件│ ├── index.js // 配置主文件│ └── prod.env.js // 编译配置文件├── index.html // 项目入口文件├── package-lock.json // npm5 新增文件，优化性能├── package.json // 项目依赖包配置文件├── src // 我们的项目的源码编写文件│ ├── App.vue // APP 入口文件│ ├── assets // 初始项目资源目录，回头删掉│ │ └── logo.png│ ├── components // 组件目录│ │ └── Hello.vue // 测试组件，回头删除│ ├── main.js // 主配置文件│ └── router // 路由配置文件夹│ └── index.js // 路由配置文件└── static // 资源放置目录
绝大多数操作，在 src 下进行，默认的 src 结构简单，需重新整理，static 目录也需要根据不同的资源创建不同的子文件夹。
这里要做两个页面，一个列表一个详情页，整理后的 src 结构如下：
├── App.vue // APP 入口文件├── api // 接口调用工具文件夹│ └── index.js // 接口调用工具├── components // 组件文件夹，目前为空├── config // 项目配置文件夹│ └── index.js // 项目配置文件├── frame // 子路由文件夹│ └── frame.vue // 默认子路由文件├── main.js // 项目配置文件├── page // 我们的页面组件文件夹│ ├── content.vue // 准备些 cnodejs 的内容页面│ └── index.vue // 准备些 cnodejs 的列表页面├── router // 路由配置文件夹│ └── index.js // 路由配置文件├── style // scss 样式存放目录│ ├── base // 基础样式存放目录│ │ ├── _base.scss // 基础样式文件│ │ ├── _color.scss // 项目颜色配置变量文件│ │ ├── _mixin.scss // scss 混入文件│ │ └── _reset.scss // 浏览器初始化文件│ ├── scss // 页面样式文件夹│ │ ├── _content.scss // 内容页面样式文件│ │ └── _index.scss // 列表样式文件│ └── style.scss // 主样式文件└── utils // 常用工具文件夹 |–index.js // 常用工具文件