I always wanted to build something more tangible with VueJS and today we will start building a store with Vue using the Scotch tutorial by Chris Nwamba. This post on building a Store with Vue or perhaps series of posts will go through this tutorial and I will add things to it I bumped into and others may bump into getting the shop up and running.
The Shop will be using the following frontend components:
It will have the following backend Components:
- Express: Routing framework for Node
- Mongoose Database schemas and models
- MongoDB: JSON database
The initial blog post is on setting up basic data binding with v-model You can skip this really as Vue CLI will overwrite some of this. Also, we wrote about v-model already so no need to do this all over again.
This is followed up by setting up vue-cli using
npm install -g vue-cli
This will install vue cli globally as long as you have npm installed already. You can use Vue-CLI to make it easier to set up a single page application. Doing it today after an upgrade with:
npm upgrade -g vue-cli
to version 2.9.2
jasper@~/webdesign/vue-basics/vue-shop $ vue --version 2.9.2
I realize Vue CLI has changed somewhat. There is an option to run npm once it is done installing the template chosen. You will also see there are some other list items that have changed. United testing does not mention package used for example. But nothing to really no longer be able to follow the tutorial.
jasper@~/webdesign/vue-basics/vue-shop $ vue init webpack . ? Generate project in current directory? Yes ? Project name vue-shop ? Project description VueJS Store ? Author Jasper Frumau <email@example.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Airbnb ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recom mended) npm
Once this setting up has run its course you will see that your directory has been filled up with loads of files to make your single page application run.
And you can run it in your browser using
npm run dev
And now at http://localhost:8080 you can see the app. Somehow the app did not open up automatically for me though. Will look into this. There are now also some more links to documentation to be seen you will not see in the Scotch tutorial: