Install Vue.js And Initialize bootstrap project

Here are some easy steps to set up Vue.js project using vue-cli and preparing project with basic tools.

Use node.js command prompt to execute appropiate commands.

1. Install vue-cli globally

npm install -g vue-cli

This command will install vue-cli globally. It will download vue tool once for all. So for setting up another project from next time, this command is not required.

2. Create project

vue init template-name project-name
cd project-name

The above command pulls a webpack template, prompts for some information and generate a project in directory/folder project-name. You can choose from various templates(simple, webpack,...). Change directory to your project folder.

3. Install dependencies

npm install

Install all the dependencies required by the template as listed in package.json file.

4. Bootstrap requirements

npm install bootstrap
npm install jquery
npm i --save popper.js

Install bootstrap module and requirements. these files will be listed under node_modules folder in the project.

Add necessary links.

add to main.js:
import jquery from 'jquery'
import bootstrap from 'bootstrap'

add to index.html:
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >


5. Create router for project

npm install vue-router

This command will allow to set up router.js file to navigate between different pages of the project.

Add necessary links.

add to router.js:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const router= new Router({ routes: [...]})

add to main.js:
import {router} from './router'
new Vue({ el: 'app', router, components: { App}, template: '', })


6. Run project

npm run dev

This command will start your local http server, open the browser and your default hosted web page will be shown.

Congrats! your project is ready to use.

Comments