vuejsdevelopers / vuejs-cinema Goto Github PK

View Code? Open in Web Editor NEW

113.0 9.0 985.0 711 KB

Source code for the case-study project from the course Build A Vue.js Single-Page App with Vue Router

Home Page: https://courses.vuejsdevelopers.com/p/build-a-single-page-app-vue-router-vue-cli?utm_source=github-vjd

JavaScript 43.83% HTML 3.33% CSS 52.84%

vue vuejs2 udemy

vuejs-cinema's Introduction

Vue.js Cinema

Source code for the case-study project from the course Build A Vue.js Single-Page App with Vue Router

Demo

See the completed project here: http://vuejs-cinema.vuejsdevelopers.com/

Pre-installation

Ensure Node.js >=5.10, NPM and git are installed on your system

Installation

Install this code on your local system
1. Fork this repository (click 'Fork' button in top right corner)
2. Clone the forked repository on your local file system
```
cd /path/to/install/location

git clone https://github.com/[your_username]/vuejs-cinema.git
```
Change into directory
```
cd vuejs-cinema
```
Install dependencies
```
npm install
```
Create a .env file by copying the sample
```
cp .env_sample .env
```
Edit the .env file and replace any variables if needed
Start project
```
npm run start
```

Your site will be available at localhost:[PORT] where PORT is whatever value is set in your .env file.

Lecture branches

Each branch of of the repo shows the state of the code at the end of any particular video e.g. video/08 shows the state at the end of video 8.

If you want the initial state of the code, use the master branch.

If you're doing the Vue.js Essentials - 3 Course Bundle course on Udemy, you'll need the following conversion table to match the branch to the lecture number.

Lecture #	Branch name
58	video/02
64	video/08
66	video/10
67	video/11
68	video/12
70	video/14
71	video/15
73	video/17
77	video/21
78	video/22
80	video/24
81	video/25
82	video/26
83	video/27
84	video/28
85	video/29
86	video/30
87	video/31
88	video/32
89	video/33
90	video/34
91	video/35
92	video/36
93	video/37
94	video/38
96	video/40
98	video/42
99	video/43
100	video/44
101	video/45
102	video/46
103	video/47
105	video/49
106	video/50
107	video/51
108	video/52
109	video/53
110	video/54
111	video/55
113	video/57
114	video/58
115	video/59
117	video/61
118	video/62
119	video/63

vuejs-cinema's People

Contributors

Stargazers

Watchers

Forkers

mscanlon o1634246 blabaj ylhoony blakenafzinger jeremeallen acoles ethien-salinas polo33 pwillmann chap6680 wadday de5peratelighter cyrusonline eharit agilehobo nathiboat thiagorossener barkinet jackedwardlyons 3jerregaard lucassimon jajibona johnyesit carlgordon motchju ryenski aablain ghhv tlaszkie taniarv wyborstudiow mbliok johan1228 hemmoi r317 minimalismore markgk629 lebryan middlegame jefflindholm joelz x404 davejacobs121 rkostko nrwillrich tahoemate bartmalanczuk imylomylo nathanaelnsmith ariellephan fernyherrera baejinhan victormanco bg6472 malaniarpit joshuahoover richiverse hengling dgriego otma88 sheser gadrev eurinb jp-dev ribanez7 viktortat pijai adbutt yourivandenbrand timothynott charl jemminger daire22 wsmcnaughton lakovic sp900409 ropable jkwchui trevor-learning-stuff naemcivic yaitsky qborreda ashwinviafoura elboerse nikie aldomendez thomasvanophem stevenchanin ww3 dstojanovs microlink26 amorfati0310 wreilly jesvs vodaza36 ponach hideji fnez rwebler

vuejs-cinema's Issues

when using latest version of Vue props don't init properly

Im at the end of lecture 76, and I noticed that the props for the movie-list component were not populated with arrays but with undefined.
So turns out I have Vue 2.1.10 and in order to get it to 'sort of' work I have to change the data member of the root component to return a function:

new Vue({
el: '#app',
data() {
return {
genre: [],
time: []
}
...

And this causes props to be updated on the root component when you click the filter, not movie-list.
when I revert to 2.1.0 everything seems fine though, so Ill continue using that for now.

Even after updating package.json, I get the following error

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/bobwalsh/vuejs-cinema/src/main.js: this.setDynamic is not a function
    at PluginPass.pre (/Users/bobwalsh/vuejs-cinema/node_modules/babel-plugin-transform-runtime/lib/index.js:31:12)
    at transformFile (/Users/bobwalsh/node_modules/@babel/core/lib/transformation/index.js:96:27)
    at transformFile.next (<anonymous>)
    at run (/Users/bobwalsh/node_modules/@babel/core/lib/transformation/index.js:35:12)
    at run.next (<anonymous>)
    at Function.transform (/Users/bobwalsh/node_modules/@babel/core/lib/transform.js:27:41)
    at transform.next (<anonymous>)
    at step (/Users/bobwalsh/node_modules/gensync/index.js:254:32)
    at /Users/bobwalsh/node_modules/gensync/index.js:266:13
    at async.call.result.err.err (/Users/bobwalsh/node_modules/gensync/index.js:216:11)
    at /Users/bobwalsh/node_modules/gensync/index.js:184:28
    at /Users/bobwalsh/node_modules/@babel/core/lib/gensync-utils/async.js:72:7
    at /Users/bobwalsh/node_modules/gensync/index.js:108:33
    at step (/Users/bobwalsh/node_modules/gensync/index.js:280:14)
    at /Users/bobwalsh/node_modules/gensync/index.js:266:13
    at async.call.result.err.err (/Users/bobwalsh/node_modules/gensync/index.js:216:11)
 @ multi ./src/main.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000 main[0]
ℹ ｢wdm｣: Failed to compile.

package.json:

{
  "name": "vue-cinema",
  "version": "1.1.0",
  "description": "The Ultimate Vue.js Developers Course - Vue.js Cinema",
  "main": "server.js",
  "author": "Anthony Gore <[email protected]>",
  "repository": {
    "type": "git",
    "url": "https://github.com/vuejsdevelopers/vuejs-cinema"
  },
  "license": "UNLICENSED",
  "scripts": {
    "start": "nodemon ./server.js --ignore src/ -e js,html,css",
    "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "engines": {
    "node": ">=5.10"
  },
  "dependencies": {
    "async": "~3.2.0",
    "axios": "~0.19.2",
    "cross-env": "~7.0.2",
    "dotenv": "~8.2.0",
    "express": "~4.17.1",
    "vue": "^2.6.11",
    "nodemon": "~2.0.3"
  },
  "devDependencies": {
    "babel-core": "~6.26.3",
    "babel-loader": "~8.1.0",
    "babel-plugin-transform-es2015-destructuring": "~6.23.0",
    "babel-plugin-transform-object-rest-spread": "~6.26.0",
    "babel-plugin-transform-runtime": "~6.23.0",
    "babel-preset-env": "~1.7.0",
    "css-loader": "~3.5.3",
    "file-loader": "~6.0.0",
    "moment": "~2.25.3",
    "moment-timezone": "~0.5.28",
    "node-sass": "~4.14.1",
    "open": "~7.0.3",
    "sass-loader": "~8.0.2",
    "style-loader": "~1.2.1",
    "uglify-js": "~3.9.2",
    "vue-loader": "~15.9.2",
    "vue-resource": "~1.5.1",
    "vue-router": "~3.1.6",
    "vue-style-loader": "~4.1.2",
    "vue-template-compiler": "~2.6.11",
    "webpack": "~4.43.0",
    "webpack-dev-middleware": "~3.7.2",
    "webpack-hot-middleware": "~2.25.0",
    "webpack-module-hot-accept": "~1.0.5"
  }
}

Just running "webpack" from the terminal doesn't work anymore

Running "webpack" results in:

The CLI moved into a separate package: webpack-cli
Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)NO

Choosing "yes" results in an install of webpack-cli, but it won't work, since it needs a version of webpack compatible with webpack 4 -- what would be the best way to deal with this issue?

NPM module security vulnerabilities

I've just updated the repo to replace NPM packages in this repo which have security issues.

If you forked from this repo, you need to sync your fork. Here's a guide:

https://help.github.com/articles/syncing-a-fork/

With that done, run git fetch and git pull in your project directory to pull the changes locally. Then run npm install and the packages will be updated.

If you cloned this repo, run git fetch and git pull in your project directory to pull the changes locally. Then run npm install and the packages will be updated.

npm not install

not install npm in generate error in node_modules

Please Help me.

(node:6244) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead TypeError: result.setExpression is not a function

I've followed the readme.md instructions and ended up getting this error while building with webpack so any solution that will work out?