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
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
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
显然，
views文件夹内的文件都对应着某条路由规则，可以结合着看，顺着路由找组件。
components
components文件夹下是一个个组件，作为螺丝钉🔩，被views里的组件使用
