Updated repository using Vue 3 can be found here
This is an Vue.js 2+ application. It attempts to demonstrate creating a simple web application using Vue.js.
The constructs that we see being employed in this demo are:
- Creating Vue.js components
- Creating component hierarchies
props
and custom events- Smart vs. Dumb components
- Ajax using
axios
- Routes, routing, and the
router-view
- Forms using Vue.js
- Using the best practices for naming and project layout
- Unit/integration/e2e testing
This project also leverages Vuetify for styling.
- Download and install
node
per this- This will install
npm
as well
- This will install
- As an alternative to
npm
you can useyarn
. If you choose to do so, you can find installation instructions here - Vue CLI - You will find instructions here
- Install Git
- Install Visual Studio Code
- Install Vetur
- Install the EditorConfig extension
- Intall the Jest extension
- Install the ESLint extension
- Install Google Chrome
- Install the Vue.js devtools
First git-clone
or download this repository (Though it's preferred you clone)
Then open a terminal, cd
to the directory where you cloned this repository.
Make sure node
/npm
(or yarn
if you have it installed) are in your path!
npm install # or `yarn install`
Open two terminals.
In both cd
to the directory where you cloned this repository.
In the first one, run
npm run server # or `yarn run server`
You should see something to the effect of
$ json-server --watch server/api/db.json
\{^_^}/ hi!
Loading server/api/db.json
Done
Resources
http://localhost:3000/friends
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
In the second terminal run
npm serve # or `yarn serve`
Once the console is settled, visit http://localhost:8080/ and you should see a http://localhost:8080/
with a "Hello" message.
You are all set!
Replace npm
with yarn
if that is what you are using
npm run lint
npm run test:e2e
npm run test:unit
Every once in a while it seems that Jest gets in a weird state, leading to errors that look like so:
FAIL tests/unit/Example.spec.js
● Test suite failed to run
/Users/raju/Documents/presentations/2019/A-Vue-Perspective/friends-hq/tests/unit/Example.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.iterator";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
At this point, try clearing the Jest cache like so:
./node_modules/jest/bin/jest.js --clearCache
And then run test:unit
again.
The best way to peruse the changes in this codebase is to follow the commit history. Each commit has been deliberately designed to highlight one particular aspect in our exploration of Vue.js.
This project is inspired by Monica.