[实习笔记] 怎样更有效率地开发小项目

[deligent-ant]

关于稍微复杂项目开始之前对准备

1. 查看所需要的数据，以及观察其来源，是本地运算还是远程fetch
2. init store fe有rootStore和Module_Store 。然后考虑什么样的数据要放在Module_store，什么样的数据不需要放入store 只需要放在自己的组建data.

rootStore.registerModule(MODULE_NAME, moduleStore)
rootStore.unregisterModule(state.moduleName) // 卸载上一个路由对应的 module store

3. 划分功能，每个组件只负责自己的功能部分，负责后，调用上层传过来的函数

详细的一些技巧

• 父子通信：子组件定义一个prop,父组件把自己method方法传过去
• 数据获取：父组件，一般是index.vue会定义method,而该方法在做了一些判断后，会调用store中actions的方法，异步获得数据
• 单页面还是多页面：如果公用的信息比较多，业务也比较简单，写成单页面，这样在数据共享上会很方便，对应需要在不同情况，展示不一样的组件，可以使用v-if。

比如这个需求，看是多个页面其实只要写一个单页面，然后分别加一个v-if就可以。

• 页面比较多的时候，在组册组件时候，可以利用路由命名如：
  

关于excel的导入与导出

使用js-xlsx 插件，具体使用可以看一下github js-xlsx
有搭配的工具，util 无论是转json或是array都比较方便

关于git

git clone   
git checkout -b branch-name origin/branch-name //建立与远程分支关联都本地分支
git pull 与 git push //同步远程分支，与上传分支

注意事项

• store的mutation 是没有return,会有问题。

• 以及在使用mapMutations等引入子store时候加上mudule-name

computed: {
    ...mapState(MODULE_NAME, [
      'userBasic',
      'loanDetail',
      'repayList',
      'repayPlan',
      'cardList'
    ]) //从store加入数据

• 在method上调用自身组件的method方法记得加上this（可执行上下文），关于ActiveObject与scope(作用域链)知识需要在加强一下

• 关于es5的声明提前，变量和函数的优先级，函数的优先级比变量高。