diff --git a/docs/README.md b/docs/README.md index 6c350b1..36fdb2b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,6 @@ # Introduction -This [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and `vue-loader`. Make sure to also read [`vue-loader`'s documentation](http://vuejs.github.io/vue-loader/index.html) for common workflow recipes. +This [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and `vue-loader`. Make sure to also read [`vue-loader`'s documentation](https://vue-loader.vuejs.org/) for common workflow recipes. If you just want to try out `vue-loader` or whip out a quick prototype, use the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template instead. diff --git a/docs/backend.md b/docs/backend.md index ef07286..e7acadf 100644 --- a/docs/backend.md +++ b/docs/backend.md @@ -5,22 +5,36 @@ If you are building a purely-static app (one that is deployed separately from th Let's take a look at the default `config/index.js`: ``` js +// config/index.js 'use strict' - const path = require('path') module.exports = { + dev: { + / Paths + assetsSubDirectory: 'static', + assetsPublicPath: '/', + proxyTable: {}, + + // Various Dev Server settings + host: 'localhost', + port: 8080, + + // skipping other options as they are only convenience features + }, build: { - index: path.resolve(__dirname, 'dist/index.html'), - assetsRoot: path.resolve(__dirname, 'dist'), + // Template for index.html + index: path.resolve(__dirname, '../dist/index.html'), + + // Paths + assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', - productionSourceMap: true + + productionSourceMap: true, + + // skipping the rest ... }, - dev: { - port: 8080, - proxyTable: {} - } } ``` diff --git a/docs/commands.md b/docs/commands.md index c811e33..87500ce 100644 --- a/docs/commands.md +++ b/docs/commands.md @@ -28,7 +28,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc - Supports ES2015+ in test files. - Supports all webpack loaders. -- Easy [mock injection](http://vuejs.github.io/vue-loader/en/workflow/testing-with-mocks.html). +- Easy [mock injection](https://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html). ### `npm run e2e` @@ -38,3 +38,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc - Works with one command out of the box: - Selenium and chromedriver dependencies automatically handled. - Automatically spawns the Selenium server. + +### `npm run lint` + +> Runs eslint and reports any linting errors in your code. See [Linter Configuration](linter.md) diff --git a/docs/e2e.md b/docs/e2e.md index 1525fa4..2c2f173 100644 --- a/docs/e2e.md +++ b/docs/e2e.md @@ -10,7 +10,7 @@ Let's take a look at the files in the `test/e2e` directory: - `nightwatch.conf.js` - Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/guide#settings-file) for more details. + Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/gettingstarted#settings-file) for more details. - `custom-assertions/` diff --git a/docs/env.md b/docs/env.md index 211ca5d..076d2a0 100644 --- a/docs/env.md +++ b/docs/env.md @@ -47,5 +47,5 @@ As we can see, `test.env` inherits the `dev.env` and the `dev.env` inherits the It is simple to use the environment variables in your code. For example: ```js -Vue.config.debug = process.env.DEBUG_MODE -``` \ No newline at end of file +Vue.config.productionTip = process.env.NODE_ENV === 'production' +``` diff --git a/docs/linter.md b/docs/linter.md index 0bc3be1..bff51c0 100644 --- a/docs/linter.md +++ b/docs/linter.md @@ -1,15 +1,16 @@ # Linter Configuration -This boilerplate uses [ESLint](http://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations. +This boilerplate uses [ESLint](https://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations. If you are not happy with the default linting rules, you have several options: 1. Overwrite individual rules in `.eslintrc.js`. For example, you can add the following rule to enforce semicolons instead of omitting them: ``` js + // .eslintrc.js "semi": [2, "always"] ``` 2. Pick a different ESLint preset when generating the project, for example [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb). -3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](http://eslint.org/docs/rules/) for more details. +3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](https://eslint.org/docs/rules/) for more details. diff --git a/docs/pre-processors.md b/docs/pre-processors.md index 957e41c..fa58751 100644 --- a/docs/pre-processors.md +++ b/docs/pre-processors.md @@ -1,6 +1,6 @@ # Pre-Processors -This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. For example, to use SASS: +This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS: ``` bash npm install sass-loader node-sass --save-dev @@ -20,19 +20,23 @@ Once installed, you can use the pre-processors inside your `*.vue` components us ### A note on SASS syntax -- `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolones). +- `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolons). - `lang="sass"` corresponds to the indentation-based syntax. ### PostCSS -Styles in `*.vue` files are piped through PostCSS by default, so you don't need to use a specific loader for it. You can simply add PostCSS plugins you want to use in `build/webpack.base.conf.js` under the `vue` block: +Styles in `*.vue` files and style files (`*.css`, `*.scss` etc) are piped through PostCSS by default, so you don't need to use a specific loader for it. + +You can simply add PostCSS plugins you want to use to the `.postcssrc.js`file in your project's root directory: ``` js -// build/webpack.base.conf.js +// https://github.com/michael-ciniawsky/postcss-load-config + module.exports = { - // ... - vue: { - postcss: [/* your plugins */] + "plugins": { + // to edit target browsers: use "browserslist" field in package.json + "postcss-import": {}, + "autoprefixer": {} } } ``` diff --git a/docs/proxy.md b/docs/proxy.md index fc822ea..60b5151 100644 --- a/docs/proxy.md +++ b/docs/proxy.md @@ -31,7 +31,7 @@ In addition to static urls you can also use glob patterns to match URLs, e.g. `/ ``` js proxyTable: { - '*': { + '**': { target: 'http://jsonplaceholder.typicode.com', filter: function (pathname, req) { return pathname.match('^/api') && req.method === 'GET' diff --git a/docs/static.md b/docs/static.md index f9f9a3c..b8fe3d2 100644 --- a/docs/static.md +++ b/docs/static.md @@ -1,4 +1,4 @@ -# Handing Static Assets +# Handling Static Assets You will notice in the project structure we have two directories for static assets: `src/assets` and `static/`. What is the difference between them? @@ -6,9 +6,9 @@ You will notice in the project structure we have two directories for static asse To answer this question, we first need to understand how Webpack deals with static assets. In `*.vue` components, all your templates and CSS are parsed by `vue-html-loader` and `css-loader` to look for asset URLs. For example, in `` and `background: url(./logo.png)`, `"./logo.png"` is a relative asset path and will be **resolved by Webpack as a module dependency**. -Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment. +Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This template has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment. -Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, along side other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it. +Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, alongside other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it. ### Asset Resolving Rules @@ -41,7 +41,7 @@ In comparison, files in `static/` are not processed by Webpack at all: they are As an example, with the following default values: ``` js -// config.js +// config/index.js module.exports = { // ... build: { diff --git a/docs/structure.md b/docs/structure.md index 8daf543..880888c 100644 --- a/docs/structure.md +++ b/docs/structure.md @@ -17,20 +17,24 @@ ├── static/ # pure static assets (directly copied) ├── test/ │ └── unit/ # unit tests -│ │   ├── specs/ # test spec files -│ │   ├── index.js # test build entry file -│ │   └── karma.conf.js # test runner config file +│ │ ├── specs/ # test spec files +│ │ ├── eslintrc # config file for eslint with extra settings only for unit tests +│ │ ├── index.js # test build entry file +│ │ └── karma.conf.js # test runner config file │ └── e2e/ # e2e tests │ │   ├── specs/ # test spec files │ │   ├── custom-assertions/ # custom assertions for e2e tests │ │   ├── runner.js # test runner script │ │   └── nightwatch.conf.js # test runner config file ├── .babelrc # babel config -├── .postcssrc.js # postcss config +├── .editorconfig # indentation, spaces/tabs and similar settings for your editor ├── .eslintrc.js # eslint config -├── .editorconfig # editor config +├── .eslintignore # eslint ignore rules +├── .gitignore # sensible defaults for gitignore +├── .postcssrc.js # postcss config ├── index.html # index.html template -└── package.json # build scripts and dependencies +├── package.json # build scripts and dependencies +└── README.md # Default README file ``` ### `build/`