1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

(Part 1. Install package.json) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnb

Last updated at Posted at 2018-07-02

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

Part 6. Config index.html

Part 5. Config .stylelintrc.json

Part 4. Config .eslintrc.json

Part 3. Config .babelrc

Part 2. Config Webpack4

Part 1. Install package.json

Github : Vue2-Starter-Kit

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?