Search⌘ K
Home
Courses
Jump Start with Vue 3

npm Scripts and Plugins

Explore npm scripts to streamline development tasks such as serving, building, and linting Vue 3 projects. Understand how to configure and add official and third-party Vue CLI plugins, including TypeScript, Vuex, router, and testing tools to customize and enhance your Vue applications.

We'll cover the following...

npm scripts

In the new project directory, there are several preconfigured npm scripts that we can use:

  • npm run serve: This will start a local development server and compile the project files. The process will watch the files in our src folder and recompile on any changes.

  • npm run build: This command will compile our project, creating an optimized production build.

  • npm run lint: This will run the linter on our project’s source files, checking them for compliance with the rule sets specified in the eslintConfig section of the project’s package.json file.

The generated package.json file is also worth a quick look.

Javascript (babel-node)
{
  "name": "my-new-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
    },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
"not dead" ]
}

As we can see, ESLint has been set up with the recommended ...