Web page for the search and reproduction of songs, through the use of the Spotify api

Novel Music

App Designed for Platzi’s Vue.js course

Getting Started

In order to run the project locally

Change of routes

Edit the src / routes.js file

# Change routes depending on whether it is for development or production
const routes = [
  {path: ' / ' , component: Search, name: ' search ' },
  {path: ' / about ' , component: About, name: ' about ' },
  {path: ' / track /: id ' , component: TrackDetail, name: ' track ' },
  {path: ' / 404 ' , component: PageNotFound},
  {path: ' / * ' , redirect: ' / 404 ' }
]

Edit the index.html file

  ...
   < title > Novel Music < / title > 
  < link rel = " shortcut icon " href = " /src/assets/logo-icon.png " type = " image / x-icon " >
  ...
< / head > 
< body > 
  < div id = " app " > </ div > 
  < ! - Cambiar️ Change the Url depending if it is for Development or Production - > 
  < script src = " /dist/build.js " > </ script > 
< / body >

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost: 8080
npm run dev

# build for production with minification 
npm run build

CLI and Dev Tools

Eslint

ESLint Config for JavaScript Standard Style, see in docs for eslint-config-standard .

# Install Eslint
npm i -D eslint

# If you want to set up the config manually, run the following command:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

# Install the loader 
npm i -D eslint-loader

Pug

PUG allows us to create HTML with another type of syntax, writing less code, and through webpack to compile it to work in the browser.

npm i -D pug pug-loader

Bulma

CSS framework

npm i -S bulma

Vue-Router

It allows working with nested routes, it is modular, it allows creating routes with parameters and it allows applying transitions to routes

# Install vue-loader
npm i -S vue-router

# Then just add in the routes.js file the routes that are needed

For detailed explanation on how things work, consult the docs for vue-loader .

Authors

Roque Alarcon - Initial work - Roque363

Acknowledgments

For more details see the Platzi VueJS Course .

Download Details:

Author: roque363

Live Demo: https://roque363.github.io/novel-music/

GitHub: https://github.com/roque363/novel-music

#vuejs #vue #vue-js #javascript