vue-realworld-example-app 分析

github repo
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners. demo

起步

git clone https://github.com/gothinkster/vue-realworld-example-app.git
cd vue-realworld-example-app
npm install
npm run dev #会在自动打开浏览器跳转到localhost:8080

分析

项目结构

项目结构
src文件夹放置主要的逻辑

src

App.vue是主组件，在这里面引入其他组件，达到模块化的目的。
main.js中初始化Vue实例。
还剩下common,components,router,store,views五个文件夹

common中有5个js文件

api.service.js 中初始化了几个api服务：ApiService、TagsService、ArticlesService、CommentsService 。方便后面在组件中使用CRUD(creat, retrieve, update, delete)操作。

config.js中配置了API_URL，即后端api的地址，默认是官网demo的后端，可以改成本地运行的后端api地址

date.filter.js和error.filter.js做的是数据的格式化

jwt.service.js中封装了对window.localStorage的三种基本操作: getItem、setItem、removeItem以处理token

store文件夹中是vuex的一些配置文件

分为home,auth,article,profile四个模块，每个模块导出四项

模块
导出
actions.type.js和 mutations.type.js中定义了各模块中用到的action和mutation
actions.type.js
mutations.type.js
index.js中初始化了Vuex

todo分析一个具体的模块

views

<!-- App.vue -->
<template>
  <div id="app">
    <rwv-header></rwv-header>
    <router-view></router-view>
    <rwv-footer></rwv-footer>
  </div>
</template>

<script>
import RwvHeader from '@/components/TheHeader'
import RwvFooter from '@/components/TheFooter'

export default {
  name: 'App',
  components: {
    RwvHeader,
    RwvFooter
  }
}
</script>

<style>
</style>

可以看到主模块中除了引入了header和footer两个模块还有一个<router-view></router-view>
它的作用就是根据 router/index.js里面定义的路由规则把在此处渲染相应的模块
比如访问/login会加载views/Login模块，即views/Login.vue

/login路由
显然， views文件夹内的文件都对应着某条路由规则，可以结合着看，顺着路由找组件。

components

components文件夹下是一个个组件，作为螺丝钉🔩，被views里的组件使用

componets/*