Skip to content

Cacaci/Vue-demo

Repository files navigation

Learn Vuex by Rebuilding a Notes App

This code is for the tutorial on building a Notes App using VueJs and Vuex

Check out the full tutorial on coligo

Install the dependencies

npm install

Run the dev server with hot reload at localhost:8080

npm run dev

Build the app for production

npm run build

使用vuex2.0重构

这是我学习vuex过程中看到的最容易理解vue状态管理的的一个Demo,原先的版本是使用vuex1.0写的, 这里我用vuex2.0重新写了一遍,仅供参考。

关于demo

你可以从原作者的Github Repo下载vuex1.0的源码,这里是demo的地址。

当然,你也可以参考我github上的改写后的源码,这里是demo地址。

Segmentfault社区也有人翻译了作者的原文译文。有兴趣的同学可以参考一下,对比vuex1.0和vuex2.0的一些差异。

使用webpack2打包

使用webpack2稍微做了调整,尝试将组件内容的css样式独立打包到单独的css文件中 关于webpack2的相关教程,可参考这边博文

结语

本次介绍vuex使用了coligo写的例子,原先使用的vuex版本是1.0的,学习完vue,我用vuex2.0重新写了一遍,算是巩固知识,也对vue有了更深入的认识。根据此次学习vuex的过程,也相应在简书发表了一篇小小的文章,从一个改写后的vue小应用认识vuex,有兴趣的朋友可以去看看^_^ 另外,在Segmentfault社区也有人翻译的作者所写的关于这个Notes App的教程说明,推荐给大家。 原文:Learn Vuex by Rebuilding a Notes App
译文:用Vuex构建一个笔记应用