A Vue project

Let's take a look at the structure of a Vue-based project generated by cooking. It supports ES6, hot reload and ESLint:

|-- src/
  |-- app.vue
  |-- entry.js
  |-- index.tpl
|-- .babelrc
|-- .eslintrc
|-- cooking.conf.js
|-- package.json

And its configuration:

var cooking = require('cooking')

cooking.set({
  entry: './src/entry.js',
  dist: './dist',
  template: './src/index.tpl',
  devServer: true,

  // Production
  clean: true,
  hash: true,
  sourceMap: true,
  extractCSS: true,
  extends: ['vue', 'lint']
})

module.exports = cooking.resolve()

package.json:

{
  "name": "test-vue",
  "version": "0.0.0",
  "description": "A vue project.",
  "dependencies": {
    "vue": "^1.0.0"
  },
  "devDependencies": {
  }
}

The above zero-devDependency project is created directly by cooking. This means with two lines of commands you can start a project that:

  • supports hot reload and lint
  • adds hash and sourceMap to built files
  • with standalone CSS file This is what cooking brings.

Dependency management

And of course, if you don't want to make everyone who uses your project have to install cooking-cli globally and lose a precise control of dependencies, you may install cooking locally. In this case, package.json should look something like this:

{
  "name": "test-vue",
  "version": "0.0.0",
  "description": "A vue project.",
  "dependencies": {
    "vue": "^1.0.0"
  },
  "devDependencies": {
    "cooking": "^1.0.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "css-loader": "^0.24.0",
    "extract-text-webpack-plugin": "^1.0.0 || ^2.0.0-beta",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.9.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.0 || ^2.1.0-beta",
    "webpack-dev-server": "^1.14.0 || ^2.1.0-beta",
    "postcss": "^5.1.0",
    "postcss-loader": "^0.11.1"
  }
}