From 75e35b0f6e5eb95f2eda5728aef28a57f79dc7fb Mon Sep 17 00:00:00 2001 From: Warat Wongmaneekit Date: Sat, 7 Oct 2017 16:15:35 +0700 Subject: [PATCH 1/5] Update Readme --- README.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0b31c19..57e769c 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,16 @@ $ npm install $ npm run dev ``` +or use this command for Yarn + +``` bash +$ yarn global add vue-cli +$ vue init pwa my-project +$ cd my-project +$ yarn +$ yarn dev +``` + If port 8080 is already in use on your machine you must change the port number in `/config/index.js`. Otherwise `npm run dev` will fail. ## What's Included @@ -30,27 +40,27 @@ If port 8080 is already in use on your machine you must change the port number i * Mobile-friendly meta-viewport * Lighthouse score of 90+/100 -- `npm run dev`: first-in-class development experience. +- `npm run dev` or `yarn dev`: first-in-class development experience. - Webpack + `vue-loader` for single file Vue components. - State preserving hot-reload - State preserving compilation error overlay - Lint-on-save with ESLint - Source maps -- `npm run build`: Production ready build. +- `npm run build` or `yarn build`: Production ready build. - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2). - HTML minified with [html-minifier](https://github.com/kangax/html-minifier). - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano). - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets. - - Use `npm run build --report`to build with bundle size analytics. + - Use `npm run build --report` or `yarn build --report` to build with bundle size analytics. - Generates a Service Worker for offline caching your static assets using [sw-precache-webpack-plugin](https://www.npmjs.com/package/sw-precache-webpack-plugin) -- `npm run unit`: Unit tests run in PhantomJS with [Karma](http://karma-runner.github.io/0.13/index.html) + [Mocha](http://mochajs.org/) + [karma-webpack](https://github.com/webpack/karma-webpack). +- `npm run unit` or `yarn unit`: Unit tests run in PhantomJS with [Karma](http://karma-runner.github.io/0.13/index.html) + [Mocha](http://mochajs.org/) + [karma-webpack](https://github.com/webpack/karma-webpack). - Supports ES2015+ in test files. - Supports all webpack loaders. - Easy mock injection. -- `npm run e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/). +- `npm run e2e` or `yarn e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/). - Run tests in multiple browsers in parallel. - Works with one command out of the box: - Selenium and chromedriver dependencies automatically handled. From 500aca5acfa32c87096dcb5a83ed91cc5bc05086 Mon Sep 17 00:00:00 2001 From: Warat Wongmaneekit Date: Sat, 7 Oct 2017 16:19:52 +0700 Subject: [PATCH 2/5] Update document --- docs/commands.md | 8 ++++---- docs/e2e.md | 2 +- docs/pre-processors.md | 5 +++++ docs/prerender.md | 6 ++++++ 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/docs/commands.md b/docs/commands.md index c92df52..1b23e8c 100644 --- a/docs/commands.md +++ b/docs/commands.md @@ -2,7 +2,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/scripts). -### `npm run dev` +### `npm run dev` or `yarn dev` > Starts a Node.js local development server. See [API Proxying During Development](proxy.md) for more details. @@ -12,7 +12,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc - Lint-on-save with ESLint - Source maps -### `npm run build` +### `npm run build` or `yarn build` > Build assets for production. See [Integrating with Backend Framework](backend.md) for more details. @@ -22,7 +22,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets. - Generates a Service Worker for offline caching your static assets using [sw-precache-webpack-plugin](https://www.npmjs.com/package/sw-precache-webpack-plugin) -### `npm run unit` +### `npm run unit` or `yarn unit` > Run unit tests in PhantomJS with [Karma](https://karma-runner.github.io/). See [Unit Testing](unit.md) for more details. @@ -30,7 +30,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc - Supports all webpack loaders. - Easy [mock injection](http://vuejs.github.io/vue-loader/en/workflow/testing-with-mocks.html). -### `npm run e2e` +### `npm run e2e` or `yarn e2e` > Run end-to-end tests with [Nightwatch](http://nightwatchjs.org/). See [End-to-end Testing](e2e.md) for more details. diff --git a/docs/e2e.md b/docs/e2e.md index 1525fa4..6b06922 100644 --- a/docs/e2e.md +++ b/docs/e2e.md @@ -6,7 +6,7 @@ Let's take a look at the files in the `test/e2e` directory: - `runner.js` - A Node.js script that starts the dev server, and then launches Nightwatch to run tests against it. This is the script that will run when you run `npm run e2e`. + A Node.js script that starts the dev server, and then launches Nightwatch to run tests against it. This is the script that will run when you run `npm run e2e` or `yarn e2e`. - `nightwatch.conf.js` diff --git a/docs/pre-processors.md b/docs/pre-processors.md index 957e41c..e0a5e3d 100644 --- a/docs/pre-processors.md +++ b/docs/pre-processors.md @@ -5,6 +5,11 @@ This boilerplate has pre-configured CSS extraction for most popular CSS pre-proc ``` bash npm install sass-loader node-sass --save-dev ``` +or + +``` bash +yarn add sass-loader node-sass --dev +``` Note you also need to install `node-sass` because `sass-loader` depends on it as a peer dependency. diff --git a/docs/prerender.md b/docs/prerender.md index d69e349..ec87869 100644 --- a/docs/prerender.md +++ b/docs/prerender.md @@ -10,6 +10,12 @@ If you want to prerender routes that will not significantly change once pushed t npm install --save-dev prerender-spa-plugin ``` +or + +``` bash +yarn add prerender-spa-plugin --dev +``` + 2. Require it in **build/webpack.prod.conf.js**: ```js From 1f5f4d439602fe16e2493c8f52f100fcd9b827d1 Mon Sep 17 00:00:00 2001 From: Warat Wongmaneekit Date: Sat, 7 Oct 2017 16:22:56 +0700 Subject: [PATCH 3/5] Add yarn document --- docs/README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 6c350b1..39a1cbc 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,7 +6,7 @@ If you just want to try out `vue-loader` or whip out a quick prototype, use the ## Quickstart -To use this template, scaffold a project with [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ for a more efficient dependency tree.** +To use this template, scaffold a project with [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ for a more efficient dependency tree.** or [yarn](https://yarnpkg.com) for a more efficient dependency tree.** ``` bash $ npm install -g vue-cli @@ -15,3 +15,12 @@ $ cd my-project $ npm install $ npm run dev ``` +or use this command for Yarn + +``` bash +$ yarn global add vue-cli +$ vue init pwa my-project +$ cd my-project +$ yarn +$ yarn dev +``` From ddca6576ed38d43885ec856aab4a6b07a61c2829 Mon Sep 17 00:00:00 2001 From: Warat Wongmaneekit Date: Sat, 7 Oct 2017 16:33:50 +0700 Subject: [PATCH 4/5] Add yarn to start message --- meta.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/meta.js b/meta.js index d2f3257..fbeb5f6 100644 --- a/meta.js +++ b/meta.js @@ -93,5 +93,5 @@ module.exports = { "test/e2e/**/*": "e2e", "src/router/**/*": "router" }, - "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack" + "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\n or \n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}} yarn\n yarn dev\n\n Documentation can be found at https://vuejs-templates.github.io/webpack" }; From b0916c17f1879d73fe0f53e0615023fc67c60f77 Mon Sep 17 00:00:00 2001 From: Warat Wongmaneekit Date: Sat, 7 Oct 2017 16:38:34 +0700 Subject: [PATCH 5/5] Edit space --- meta.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/meta.js b/meta.js index fbeb5f6..0cf7075 100644 --- a/meta.js +++ b/meta.js @@ -93,5 +93,5 @@ module.exports = { "test/e2e/**/*": "e2e", "src/router/**/*": "router" }, - "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\n or \n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}} yarn\n yarn dev\n\n Documentation can be found at https://vuejs-templates.github.io/webpack" + "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\n or \n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}yarn\n yarn dev\n\n Documentation can be found at https://vuejs-templates.github.io/webpack" };