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
Post a Comment