1. Init your project.
$ yarn init
question name (Demo_Project):
question version (1.0.0):
question description: This is a Demo Project
question entry point (index.js):
question repository url (https://xxxx/Demo_Project.git):
question author (Johnny Chu <chuhsun@gmail.com>):
question license (MIT):
question private: true
2. Install Webpack4
$ yarn add -D webpack webpack-cli \
webpack-dev-server \
webpack-merge
3. Install Vue in Webpack4
$ yarn add vue \
vue-router \
vuex \
vue-template-compiler
$ yarn add -D vue-loader \
vue-style-loader
4. Install Axios in Webpack4
$ yarn add axios
5. Install CSS in Webpack4
$ yarn add -D css-loader \
url-loader \
file-loader
6. Install Babel in Webpack4
$ yarn add babel-polyfill
$ yarn add -D babel-eslint \
babel-loader \
babel-core \
babel-preset-env \
babel-plugin-transform-object-rest-spread \
babel-plugin-transform-class-properties
7. Install Eslint in Webpack4
$ yarn add -D eslint \
eslint-loader \
eslint-config-airbnb-base \ <--- We use AirBnb coding style.
eslint-plugin-import \
eslint-plugin-vue \
eslint-import-resolver-webpack
8. Install Stylelint in Webpack4
$ yarn add -D stylelint \
stylelint-config-standard
9. Install Optimize Libraries in Webpack4
extract-text-webpack-plugin is not support webpack4. So we use mini-css-extract-plugin.
$ yarn add -D optimize-css-assets-webpack-plugin \
clean-webpack-plugin \
html-webpack-plugin \
mini-css-extract-plugin