erikch / vuejsinactioncode Goto Github PK

View Code? Open in Web Editor NEW

299.0 30.0 213.0 5.04 MB

This is the Code For the Vue.js In Action Book!

HTML 9.93% CSS 0.51% JavaScript 84.47% Vue 5.08%

vuejsinactioncode's Introduction

Vue.js in Action

Complete files for the Vue.js in Action book!

Grab the book at https://www.manning.com/books/vue-js-in-action

Feel free to submit a PR if you find any problem with any of the code examples in the book!

FAQ

Can I run any code in any of the chapters?

No, the code you see in each folder may or may not be runnable. In the book I have snippets of code. You must combine the snippets of code into a runnable app. However, I have included the completed apps in each folder as well.

Do I need Vue CLI?

Yes and no. At the start of the book all the examples are single HTML pages that link out to the Vue.js CDN. In later chapters I converted over my Pet Store app to a Vue CLI app.

How do I run the Pet Store App

To run the pet store app change directories into the pet store directory and run npm install. Then run 'npm run dev'. Beware, you may need to change the port if it's already being used. This is found in the config/index.js.

What port does the pet store app run

I changed the configuration so the port is on 8081.

Help I found a bug!

Submit a PR and I'll look at it. After the book is released I may or may not accept pull requests. As of now I will accept them. (note: I'm really behind on PRs so I apologize if it takes a few weeks or longer for me to get to them)

vuejsinactioncode's People

Contributors

Stargazers

Watchers

Forkers

ritzalam athiwatp syedpeer simonjang virtual1 tejanhu yucigou faeliaso fosterhaines keeplearningandtrying harrisonhay mmacintosh raymondzhaoy saucec0de vgb0332 rachoor qwerty220 vahidhedayati bantana rustan-id mituller dukesnuz cuauhtemoc-amdg aijiajia znseaman nicsins hhy5277 gossdemos luxors e3d gitincognito gearmobile ramart2 buttnomaan nukantridigits deusmax88 vitaliiprots sthagen rignatev wkfff tadeoac3 maksimyugai bobkovsergey platoniuks todun hoangpq b-mcghee martin-gleason kukhtasvetlana golubvladimir sidulanaksekolahan shamalex askras vane0kravitz vladdou volodymyrmazurets hiro-9999 kishkun ayanda-d yelanting nobusugi246 jakvra pplesky nekdfl le-ar stanislavbaraniuk wezhai timchenkomo hixin webprogrammer77 tkpromise serktech shineng amyavow shumylop yyi larrygld alexanderzaplatin rubycoder ruslanlozhkin ferivmx caixinjiang keyvanarj hlavatskykh-ivan lmh7763 taisiia-efremova esbol2312 prokosa whiteblackman ivan-nor alienamigo wagnerhsu felleuch demoneno4ec scottpeterman vivekbirugupta siloss code-newbie oleksiiye woodmouth

vuejsinactioncode's Issues

.png -> .jpg

Incomplete CSS file in Chapter 2

I can't believe no one has commented on this! The app.css file for Chapters 2- 7 lacks rules for row, col, col-expand and price. It would be nice not to have to reinvent them.

Missing body tag

Hi,

Seems that on file index.html in folder chapter-02 is missing the opening of body tag.

shake animation not working

was unable to create the shake animation on the 'inventory-message' class span in chapter 8 without adding display=inline-block css.

Chapter 4: mustache error

I found a little error in Chapter 4, adding-buttons.html on line 32. Method value has one mustache. Moreover, book has one mustache too in that place.

The template compiler is not available

Hello, Erik!
I have a problem in chapter7. I've completed all the changes, but when I run a server with "npm run serve" (I use vue-cli 3) I get a warning:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in )

So I have no output data because of that and I have no idea how to fix it. I hope you can make it clearer for me.

Link in book comes to xxx site

How you can see, book in russian format divided publisher site link with "-" symbol and make link to xxx site.
Maybe it's not horrible problem, bad it's a really bad for book reputation if someone don't understand why link is broken. I'm just want you to know this problem.
Hope i helped

special characters on chapter02 code samples and utf8

Hello!
I was reading through chapter 2 and noticed the ending curly quotes are different in these lines and can give some issues.

https://github.com/ErikCH/VuejsInActionCode/blob/master/chapter-02/product-markup-cont.html#L10

https://github.com/ErikCH/VuejsInActionCode/blob/master/chapter-02/v-text-binding.html#L10

Also on https://github.com/ErikCH/VuejsInActionCode/blob/master/chapter-02/index.html the meta tag <meta charset="UTF-8"> might be needed to render special characters like $

These are small typos but I can submit a PR if you want.

Chapter 11 - itunes-search erroring

I am having below error in browser even though I installed all dependencies and created files in order in vuetify/ i-tunes project:
Error
Module build failed (from ./node_modules/stylus-loader/index.js): Error: C:\Users\deniz\Documents\vuejs in action\itunes-search\assets\app.styl:3:10 1| 2| // Import Vuetify styling 3| @require '~vuetify/src/stylus/main' ---------------^ failed to locate @require file ~vuetify/src/stylus/main.styl at CachedPathEvaluator.visitImport (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus-loader\lib\evaluator.js:157:21) at CachedPathEvaluator.Visitor.visit (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus\lib\visitor\index.js:28:40) at CachedPathEvaluator.Evaluator.visit (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus\lib\visitor\evaluator.js:160:18) at CachedPathEvaluator.Evaluator.visitRoot (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus\lib\visitor\evaluator.js:707:27) at CachedPathEvaluator.Visitor.visit (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus\lib\visitor\index.js:28:40) at CachedPathEvaluator.Evaluator.visit (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus\lib\visitor\evaluator.js:160:18) at CachedPathEvaluator.Evaluator.evaluate (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus\lib\visitor\evaluator.js:247:15) at Renderer.render (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus\lib\renderer.js:86:26) at C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\stylus-loader\index.js:167:12 at tryCatchReject (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\when\lib\makePromise.js:840:30) at runContinuation1 (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\when\lib\makePromise.js:799:4) at Fulfilled.when (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\when\lib\makePromise.js:590:4) at Pending.run (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\when\lib\makePromise.js:481:13) at Scheduler._drain (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\when\lib\Scheduler.js:62:19) at Scheduler.drain (C:\Users\deniz\Documents\vuejs in action\itunes-search\node_modules\when\lib\Scheduler.js:27:9) at processTicksAndRejections (internal/process/task_queues.js:79:11)

Vue 2 Reference

Given that Vue has been at version 3 for a while now, it would be nice to have line 4 of the code changed to

    <script src="https://unpkg.com/[email protected]"></script>

As it is, the simple reference to unpkg.com/vue brings in Vue 3, which doesn't work. Newbies like me take a while to figure out why the code isn't working.

/chapter-09/jsx-example/package.json may missing js-yaml dependency

Software version and OS info:

OS: windows 10
node: 8.0.0
npm: 5.0.0
vue-cli: 2.9.2

Error output:

 error  in ./src/components/HelloWorld.vue

Module build failed: Error: Cannot find module 'js-yaml'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\evan\Downloads\VuejsInActionCode-master\VuejsInActionCode-master\chapter-09\jsx-example\node_modules\vue-loader\node_modules\cosmi
config\lib\loadRc.js:3:12)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\evan\Downloads\VuejsInActionCode-master\VuejsInActionCode-master\chapter-09\jsx-example\node_modules\vue-loader\node_modules\cosmi
config\lib\createExplorer.js:6:14)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)

Solution:

npm i --save-dev js-yaml