app ziroom 的 Vue 重构（一）

自学Vue有一段时间了，一直没有完成一个完整的作品。现在打算拿自如app来练手，完成一个完整的作品。选择自如的原因有两点：1.自如app的界面风格比较简约美观 2. 我在自如租过房子，有它的登陆账户，方便截图然后用ps切取素材。
源代码已经共享到github：https://github.com/BokeChen/Vue-ziroom
一、在做开始开发之前，需要对整个作品进行了解和评估。
自如app的首页如下图：

从底部导航栏，可看到：合租/整租 自如寓 民宿/驿栈 生活服务 我的 五部分组成。从这里可以确定我们的最基本组件数量为5。每个页面都要实现很多小功能，到时候做的时候再细分。
二、框架架设
Vue 提供有vue-cli脚手架，这里我们就用现成的手脚架。手脚架安装的步骤如下：
1. 安装node环境（略）
2. 安装cnpm（略）
3. vue 安装
在项目文件夹根路径，调出PowerShell命令窗。输入：cnpm install vue。安装完成，后会有All packages installed 的提示。
4.安装vue-cli脚手架构建工具
在PowerShell 命令窗口输入：cnpm install –global vue-cli，回车。
5.用vue-cli 初始化项目
vue init webpack vue-ziroom
在跳出的的选项中，按照自己的需求选择。
三、文件夹结构

build:打包所需要的一些配置文件
config：放置webpack一些相关的配置文件
node_modules:依赖包，node的包
src：资源
assets:图片存放点
components：存放组件
router:路由的配置文件
App.vue：项目的入口组件
main.js:项目的入口js
static：静态资源
babelrc: ES6转ES5的支撑文件
editorconfig：代码风格统一的设定文件
gitignore：上传git时，忽略的文件目录清单
postcssrc.js：引入postcss的配置文件，postcss会自动处理css3有兼容问题的指令
index.html ：html的模板
LICENSE：git的License 说明文件
package.json ：项目的配置文件和依赖包的定义
READMEmd:项目的说明文档
特别说明下：package.json 的script
“scripts”: {
“dev”: “webpack-dev-server –inline –progress –config build/webpack.dev.conf.js”,
“start”: “npm run dev”,
“build”: “node build/build.js”
}
这里定义了3个指令:dev 开启sever指令，start：启动项目，build：是项目打包。
在终端（PowerShell)里面运行npm start 等同于 npm run start ,运行start 命令。如果想运行dev命令，只需要敲npm run dev。要运行build 命令，敲 npm run build即可。
四、vuex
从package.json里面能看到，这个手脚架是不含有vuex的。在进行多级组件间的传值，引进vuex会非常方便。
引入vuex的的指令：

 cnpm install vuex -S

安装好vuex模块之后，就需要编写相应的store 、action、mutations、getters。在src的下面建一个名为：vuexConfig 的文件夹，再在里面创建四个js，分别命名为action.js getters.js mutation.js store.js。
store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex); 
const state = {

}

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})

action.js 、getters.js、mutation.js:

 export default {
    //暂时空置，后面用到再补
} 

五、webpack server
config\index.js 里面定义了localhost,端口设置监听8080。如果把localhost改成当前的主机的IP，在同一个路由下，如果就可以通过http://ip:8080来访问当前页面。

vue +vue-router+vuex ,vue的基础技术栈基本配置完成。

参考：
1.https://segmentfault.com/a/1190000011275993
2.https://cn.vuejs.org/v2/guide/comparison.html
3.https://vuex.vuejs.org/zh/installation.html