VueJS CRUD: NPM To Load Dependencies

in VueJS Crud

What Is NPM?

NPM is the Node Package Manager that is used to install, publish and manage your node programs. If you're coming from a PHP background then you can think of this as similar to composer.

NPM

Click on the link above to go to the main NPM page where you can search for and discover JavaScript libraries to use in your future projects. NPM is included with node.js so all you need to do is install node.js and you will have npm installed and ready to use, you can check this by typing the command below to get the current version of npm.

npm -v

What Dependencies Do We Need?

Within this project we need to install the following packages.

  • vue
  • body-parser
  • express
  • babel-core
  • babel-loader
  • babel-preset
  • cross-env
  • css-loader
  • file-loader
  • vue-loader
  • webpack
  • webpack-dev-server
  • vue-router
  • vue-resource

To install these packages you can use the following JSON config in your package.json file.

{
  "name": "vuejs-crud-application",
  "description": "A demo application to show how to build a CRUD application with VueJS",
  "author": "Paulund",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.0.1"
    "body-parser": "^1.4.3",
    "express": "^4.4.5"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^9.7.0",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.0",
    "vue-router": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}

Then in your command line use the command below to install all your packages.

npm install

This will load the packages into your project and their dependencies inside a node_modules in your project.

In the scripts section we've added a command webpack-dev-server that will build our application and create a local server we can view this project on. Using the command

npm run dev

This uses your webpack config (covered in the next tutorial) to build your project and start a local server you can access by navigating to http://localhost:8080/.

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email