我们先去准备一个简单的 Vue 项目 .. 在我的桌面上有我之前做 Vue 课程的时候留下的一个小项目 .. 如果你跟着我之前的 Vue 课程，也应该有个这样的项目 .. 没有的话也没关系，可以去创建一个 .. 项目里面只有两个文件 .. 非常简单 .. 先进入到这个目录的下面 ..

查看一下项目的分支 .. 我当前是在 vue-router 这个分支上 .. 这是之前介绍 Vue 路由的时候创建的一个分支 .. 基于这个分支我再创建一个新的分支 .. 名字是 vuex ..

这些操作你可以不用跟着做 .. 到时候你可以在 ninghao 的 github 仓库，找到 vue-demo 这个仓库 .. 在里面你应该可以看到我新创建的这个分支 .. 每完成一节课，我都会做一些提交 .. 你可以用 git 图形界面，切换查看这些提交 .. 看一下每小节课里面都用到了哪些代码 ..

用编辑器打开这个项目 .. 项目里只有两个重要的文件， index.html ，还有 index.js ..

先把 index.js 里面的东西都删除掉 ..

再打开 index.html ..

去掉主体部分的代码 .. 只留下这个带 app id 的 div 标签 ..

这些自定义的样式也不需要了 ..

在 head 上面，再去嵌入一个 vuex 脚本 .. 在页面上直接链接嵌入 vuex 脚本是使用 vuex 最简单的方法 ..

在做项目的时候，你可能希望使用一套模块系统 .. 这需要配合 webpack 这些前端工具去用 .. 会复杂一些 .. 这个课程我们的主要目的是去学习 vuex .. 去理解它 .. 多余的东西可能会对你有干扰 ..

我们会用单独的课程，去介绍使用模块系统创建 vue 项目的方法 ..

这个 html 页面上，除了 vuex，我还链接使用了 semantic ui 这个 css 框架 .. 还有 vue.js .. 还有个 vue-router .. 不过在这个课程里暂时不会用到 vue-router ..

回到命令行 .. 下面我们需要用到 browser-sync 这个小工具给我们的项目创建一个本地的服务器 .. browser-sync start ---server --no-notify --files 'index.html,index.js'

下面我们一起看一下 vue.js 的 vuex ..