Jump Start with Vue 3/

...

/

npm Scripts and Plugins

npm Scripts and Plugins

Learn about npm scripts and plugins.

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.

Press + to interact
{
  "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 ...

Ask