源码： https://github.com/ZH4L/vue-psy
vue文档：https://cn.vuejs.org/v2/guide/
vue-router文档：https://router.vuejs.org/zh-cn/essentials/getting-started.html
vuex文档：https://vuex.vuejs.org/zh-cn/getting-started.html
axios文档：https://www.npmjs.com/package/axios
技术栈
vue + vue-cli + vue-router + axios + vuex + webpack
vue-cli
vue-cli用于搭建项目框架
-
npm install -g vue-cli全局安装vue-cli脚手架 -
vue init webpack project-name初始化vue项目 cd project-name-
npm install安装依赖 -
npm run dev启动开发服务器
初始化后的目录结构
-
index.html是入口页面，访问/根目录就是访问了这个文件 -
src/main.js是主js，在这里可以进行一些全局的配置 -
src/App.vue是根组件，后面的组件都挂载这里
vue-router
用于实现前端路由，分为hash模式和history模式，这里用默认的hash模式
http://localhost:8080/#/psy /* #/后面的就是hash路径 */
<router-view></router-view> /* 用来挂载路由，在App.vue下 */
在src/router/index.js下定义路由
路由定义
路由最主要的是
path和component，分别是路径和对应的组件$route.params.psyId可以用来获取类似/psy-info/:psyId的路径参数$route.query.psyId可以用来获取类似/psy-info?psyId=2的路径参数
链接跳转
- 使用
<router-link v-bind:to="/psy">跳转</router-link>跳转内部链接，默认会被渲染成a标签 - 外部链接直接使用a标签跳转即可
组件
就是一个个小的模块，一个组件就是一个.vue文件，成为单文件组件，其中包括template script style三部分
官网示例
比如，在测评页面，分为了三个子组件
测评页面三个子组件
<template>
<div class="mui-content">
<!-- 进度组件 -->
<process :now="now" :total="total"></process>
<!-- 主答题区组件 -->
<psy-main :questionObj="questionNow" @changeRaidoByChild="changeRaido"></psy-main>
<!-- 切换题目组件 -->
<div id="eva_toggle_btn_group">
<switch-question type="prev" :isDisabled="prev_disabled" :show="switch_show_prev" @switchByChild="switchQuestion('prev')"></switch-question>
<switch-question type="next" :isDisabled="next_disabled" :show="switch_show_next" @switchByChild="switchQuestion('next')"></switch-question>
</div>
</div>
</template>
父组件给子组件传递数据需要通过prop，比如
<process v-bind:now="now" v-bind:total="total"></process>
这里的v-bind:now和v-bind:total就是将父组件里的now和total两个数据传给了进度条子组件
在子组件中，需要声明props才可以使用父组件的数据
props: {
now: {
type: Number,
default: 0
},
total: Number
}
<!-- 使用 -->
<span id="eva_progress_current">{{now}}</span>/<span id="eva_progress_total">{{total}}</span>
如果子组件需要改变父组件的状态，需要通过$emit触发父组件的事件
this.$emit('changeRaidoByChild', item, index) // 子组件通过$emit触发父组件的changeRaidoByChild事件
<!-- 父组件监听changeRaidoByChild事件，然后调用changeRaido方法更新数据 -->
<psy-main :questionObj="questionNow" @changeRaidoByChild="changeRaido"></psy-main>
vuex
一旦项目复杂起来，通过父子组件通信的方式很难管理状态，此时可以使用vuex
vuex有四个主要的概念：
-
state是一个全局的状态存储，数据会存储在其中，vue组件可以直接访问其中的值，但是只可以读，不可以进行写操作 -
getter,有些时候我们需要对获取的数据进行加工，而不是直接获取state中的数据，这时候可以通过getter定义函数，返回对应的数据 -
mutations是vuex中唯一一个可以修改数据的地方，mutations可以定义事件函数，在vue组件中可以通过commit发射事件，调用函数。需要注意的是，mutations中的操作必须是同步的，不可以存在异步操作的情况。 -
actions和mutation比较相似，不同的是actions中不直接修改state，而是通过commit调用mutations修改数据，而且actions中可以存在异步处理逻辑
