整合Vue + Vuex + Vue-Router。内置webpack配置,基于Koajs搭建开发服务框架,内置基本挡板中间件。 可以方便快速搭建自己的vuex应用程序。
如果你的开发环境符合版本要求,你可以用下面的步骤安装和启动项目。
$ git clone https://github.com/sokis/vue-vuex-starter-kit.git
$ cd vue-vuex-starter-kit
$ npm install # 安装依赖
$ npm start # 编译及启动
如果一切正常,你将看到如下界面:
通常在开发中,主要使用npm start
来启动项目. 但是,这里也有提供你使用的其他Npm 脚本
npm run <script> |
描述 |
---|---|
start |
启动App 本地开发服务,该环境下HMR也将运行。 localhost:3000 . |
compile |
编译App到dist 目录 (默认情况下在~/dist ). |
dev |
同 npm start |
dev:mock |
同npm run dev ,但是会加载mocking中间件 |
dev:no-debug |
同npm run dev ,但是会禁用控制台输出 |
test |
运行Karma单元测试,并生成coverage 代码覆盖测试 |
test:dev |
同npm run test ,但会开启代码监控。并且不会生成代码覆盖测试 |
deploy |
运行测试,并且生成编译后的代码 |
deploy:dev |
同 deploy ,但是环境变量 NODE_ENV 为 "development". |
deploy:prod |
同 deploy ,但是环境变量 NODE_ENV 为 "production". |
lint |
Lint all .js files. |
lint:fix |
Lint and fix all .js files. Read more on this. |
.
├── config # vuex-cli-webpack 配置文件
├── src # 源码
└── tests # 单元测试
src
目录
src
├── components # 公用组件
├── containers
├── layouts # 此处定义页面骨架组件
│ └── CoreLayout
├── routes # 路由及子路由配置
│ └── routes
├── static
├── styles
└── store
├── constants
└── plugins
routes
目录下面加入 modules 目录用于存放vuex 相关模块文件
src/routes
├── Counter
│ ├── components
│ └── modules
├── Home
│ ├── assets
│ └── components
└── User
├── components
└── routes
└── Login
├── components
└── modules
该工程,可以用 vuex-cli
快速创建。