1. 项目结构: 使用vue官方手脚架生成初始结构,src目录结构修改为
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    │  App.vue
    │ main.js

    ├─assets
    │ ├─css
    │ │ style.css
    │ │
    │ └─images
    │ product.jpg

    ├─components
    │ Head.vue
    │ Loading.vue

    ├─lib
    │ api.js
    │ mobileUtil.js

    ├─router
    │ router.js

    ├─views
    │ ├─pageA
    │ │ childA.vue
    │ │ childB.vue
    │ │ Main.vue
    │ │
    │ ├─pageB
    │ │ childA.vue
    │ │ childB.vue
    │ │ Main.vue
    │ │
    │ └─pageC
    │ childA.vue
    │ childB.vue
    │ Main.vue


    └─vuex
    │ store.js

    └─modules
    ├─pageA
    │ actions.js
    │ getters.js
    │ index.js
    │ mutation-type.js
    │ mutations.js

    ├─pageB
    │ actions.js
    │ getters.js
    │ index.js
    │ mutation-type.js
    │ mutations.js

    └─pageC
    actions.js
    getters.js
    index.js
    mutation-type.js
    mutations.js

assets文件夹存放img,css等静态资源。

components文件夹存放公共组件。

lib文件夹存放工具类,api配置等。

router文件夹存放路由配置。

views文件夹存放页面级的组件,统一Main.vue为每个页面主入口,同一页面的其他组件为子路由组件。

vuex文件夹存放vuex全局数据,store.js为主入口,里面的子文件夹按页面划分模块。

  1. vuex的action间需要进行异步回调时,使用Promise。
  2. 标签里可以通过require引入静态资源。
  3. 配合activated钩子。
  4. 动态路由
  5. 利用process.env.NODE_ENV管理生产环境的api和开发环境的api前缀。
  6. 利用v-if强制更新一个组件,$forceUpdate不生效。
  7. 表单校验使用v-validate插件。