参照 Vue 官方文档一步一步搭建的 VueDemo

[yanm1ng]

最近在学习 Vue ，利用 vue-cli 搭建了一个最简单的模板，然后一步步看着 Vuex, Vux-router 官方文档逐步加上了 Vuex, Vue-Router, Mock-server, Unit-test 。之后还会继续完善下去。。。

GitHub: https://github.com/yanm1ng/vue-starter-kit

vue-starter-kit

A Vue.js project with mock-server and unit-test

features

we use mock.js to build your mock data ( as local database :) ), for example:

var Mock = require('mockjs');

module.exports = () => {
    var db = {
      project_comments: Mock.mock({
        "comments|5": [{
          "author": "@name",
          "comment": "@cparagraph",
          "date": "@datetime"
        }],
        "next": "@increment"
      }),
      push_comment: Mock.mock({
        "error": 0,
        "message": "成功"
      })
    }
    return db;
}

json-server

we use json-server to get a full fake REST API

unit test

test components and vuex( include mutations actions getters ), test result:

build setup

# install json-server
npm install json-server -g

# install dependencies
npm install

# serve with hot reload and mock
npm run start

# serve with hot reload at localhost:8181
npm run dev

# run unit test
npm run test

# run mock server at localhost:3000
npm run mock

# build for production with minification
npm run build

TODO

• [x] add vuex to manage app state
• [x] add unit test
• [ ] refresh the mock server after modifying mock/db.js

[yanm1ng]

基本上是从无到有一步一步慢慢写出来的，刚学 Vue 的同学可以一起交流一下 :)

[Durandal01]

最后一个 TODO 可以用 pm2 或者 nodemon ，应该蛮快的呢。
超棒！点个赞

[yanm1ng]

@Durandal01 感谢建议和支持，也打算用 nodemon 来实现

[ajan]

等空了就看看