VueJS CRUD - NPM To Load Dependencies

#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/.