Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 \

3. Install Vue in Webpack4

$ yarn add vue \
           vue-router \
           vuex \

$ yarn add -D vue-loader \

4. Install Axios in Webpack4

$ yarn add axios

5. Install CSS in Webpack4

$ yarn add -D css-loader \
              url-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 \

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 \

8. Install Stylelint in Webpack4

$ yarn add -D stylelint \

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 \

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away