194. 如何快速上手、分析一个 Vue Admin 类项目

首发于我的github博客, 欢迎关注

1. package.json

   1. scripts: 查看项目如何 dev、build、deploy
   2. dependencies: 快速了解项目的依赖

2. src/main.js 项目的入口文件, 快速了解项目使用的组件、周边插件

      new Vue({
          el: '#app',
          router: router,
          store: store,
          render: h => h(App)
      })
   

3. router/index.js 路由中心，快速了解页面组成，父子路由之间的关系（children、）

   1. 根据路由文件了解路由跳转的逻辑
   2. 找到关键页面：登录、首页
   3. 分析登录页面（次要）、首页的逻辑

4. 页面分析（以 /pages/home/Home.vue 首页为例），了解页面如何加载数据，并将数据渲染到页面上

   1. 页面初始化: created (解析路由参数、发起 ajax 请求、callback 初始化页面数据，渲染页面）
   2. 发起 ajax 请求的逻辑一般写在 store 中

5. 一个简单的 store module

    export default {
        state: {
            list: []
        },
        mutations: {
            updateList (state, list) => {
            	// modify state
            	state.list = list;
   
            }
        },
        actions: {
            fetchSomeList() {
            	// $.ajax().then(list => {
            	// commit('A', list); // 调用 updateList mutations
            	// });
            }
        }
    }
   
   
   
   

   1. state：数据中心，类似Storage，比如多个页面公用一份数据，可以放在这里，比如用户角色、权限。

   state: {
    userRole: [],
   }
   
   

   2. actons：异步任务在此执行，比如 ajax，在页面通过 dispatch 调用
   3. mutations：同步任务，比如修改 state，通过 commit 方式修改

6. 如何在页面中调用 store module 中的数据

   1. 以 表格中 list 数据为例
   2. 页面通过 computed: { ...mapGetters(['home']) } 获得 home 的 state
   3. 页面可以直接通过 this.home.list 调用 store home module 的数据