create account

Getting Started with Vue.js - My First Steps - Firefox DevTools by matthewdavid

View this thread on: hive.blogpeakd.comecency.com
· @matthewdavid ·
$5.65
Getting Started with Vue.js - My First Steps - Firefox DevTools
I have studied Vue.js before, but I'm getting back into it now with some clearer goals. Within three months, I'd like to be able to build web apps in Vue with data stored in a database. I also want to be able to read other people's code and understand what's going on.

I now have the ability to set aside time to accomplish these goals!

## My first steps with Vue

On the recommendation of my "coding buddy" @harps116, I have started with the Vue.js tutorials at Laracasts.com

https://laracasts.com/series/learn-vue-2-step-by-step/

I've gotten through the introduction and I'm starting with the coding. 

## Vue.js DevTools for Firefox

When I studied Vue before, the DevTools were only available for Google Chrome. I prefer using Firefox, so it was great to see that the official Vue DevTools are now available as a Firefox extension.

![VueDevTools-Firefox.jpg](https://steemitimages.com/DQmXsq1tn7ZA72FQHTxhPLh7EaTj7SNHXKy7BiV5AxbMdAY/VueDevTools-Firefox.jpg)

You can get it here: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

## A simple Node.js web server for testing

One thing to note, it seems that the Firefox extension does not have the ability to work off of local files, they must be served from a web server.

So I quickly learned how to install a web server for node.js using NPM:

```sudo npm install http-server -g```

This installs the http-server system wide for your computer. After installing you can use the ```which http-server``` command to verify that it is available and where it is on your file system. 

To serve files in a folder, just go to that folder in the Terminal and run:

```http-server```

You'll see some output telling you it is running. The default port is 8080. So you can view the output of the server in your browser at localhost:8080/

I had named my file index.html, so it was served up automatically. If you named your file something else, you may have to specifically reference it: localhost:8080/myfile.html

## Notes on my programming posts

I will not usually be writing "how to" posts on programming, as there are lots of great resources that already do a better job at that than I would. I will have some "how to" stuff, but mostly it will be me sharing my experience.

I will be sharing my thoughts, some code snippets and notes of things that I had to work through or that I found interesting.

## Ultimate Goal

To be able to write apps that are in some way connected with blockchain tech and crypto. I'd like to be part of this revolution that's happening. There's such potential with crytpo to give more freedom to regular people. 

-- @matthewdavid
πŸ‘  , , , , , , , , , , , , , , , , , , ,
properties (23)
authormatthewdavid
permlinkgetting-started-with-vue-js-my-first-steps-firefox-devtools
categoryvuejs
json_metadata{"tags":["vuejs","nodejs","javascript","programming","firefox"],"users":["harps116","matthewdavid"],"image":["https://steemitimages.com/DQmXsq1tn7ZA72FQHTxhPLh7EaTj7SNHXKy7BiV5AxbMdAY/VueDevTools-Firefox.jpg"],"links":["https://laracasts.com/series/learn-vue-2-step-by-step/","https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/"],"app":"steemit/0.1","format":"markdown"}
created2018-01-14 06:46:06
last_update2018-01-14 06:46:06
depth0
children8
last_payout2018-01-21 06:46:06
cashout_time1969-12-31 23:59:59
total_payout_value4.365 HBD
curator_payout_value1.283 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,630
author_reputation2,155,255,892,877
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,395,718
net_rshares646,442,499,851
author_curate_reward""
vote details (20)
@ankarlie ·
$0.17
hi @matthewdavid this would have been a great utopian contribution. Why not post it there?
πŸ‘  ,
properties (23)
authorankarlie
permlinkre-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180127t152057074z
categoryvuejs
json_metadata{"tags":["vuejs"],"users":["matthewdavid"],"app":"steemit/0.1"}
created2018-01-27 15:20:57
last_update2018-01-27 15:20:57
depth1
children1
last_payout2018-02-03 15:20:57
cashout_time1969-12-31 23:59:59
total_payout_value0.170 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length90
author_reputation20,844,864,303,785
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,764,080
net_rshares20,125,672,658
author_curate_reward""
vote details (2)
@matthewdavid ·
I will be exploring utopian.io soon. Thanks for reminding me to check it out.
properties (22)
authormatthewdavid
permlinkre-ankarlie-re-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180128t053414380z
categoryvuejs
json_metadata{"tags":["vuejs"],"app":"steemit/0.1"}
created2018-01-28 05:34:15
last_update2018-01-28 05:34:15
depth2
children0
last_payout2018-02-04 05:34:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length77
author_reputation2,155,255,892,877
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id32,918,579
net_rshares0
@enews202 ·
may be i reasteam your post sir
properties (22)
authorenews202
permlinkre-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180114t064756520z
categoryvuejs
json_metadata{"tags":["vuejs"],"app":"steemit/0.1"}
created2018-01-14 06:48:06
last_update2018-01-14 06:48:06
depth1
children0
last_payout2018-01-21 06:48:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length31
author_reputation468,702,963,918
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,396,000
net_rshares0
@harps116 · (edited)
$0.17
Very nice, I will enjoy reading about your progress! Check out this list once you have wrapped your head around the basics: https://github.com/vuejs/awesome-vue/blob/master/README.md.
πŸ‘  
properties (23)
authorharps116
permlinkre-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180114t203010566z
categoryvuejs
json_metadata{"tags":["vuejs"],"links":["https://github.com/vuejs/awesome-vue/blob/master/README.md"],"app":"steemit/0.1"}
created2018-01-14 20:30:09
last_update2018-01-14 20:31:36
depth1
children0
last_payout2018-01-21 20:30:09
cashout_time1969-12-31 23:59:59
total_payout_value0.169 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length183
author_reputation31,145,258,360
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,542,714
net_rshares18,352,859,368
author_curate_reward""
vote details (1)
@marvelking ·
This is really educative and useful
Thanks for sharing this sir @matthewdavid
properties (22)
authormarvelking
permlinkre-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180114t083744016z
categoryvuejs
json_metadata{"tags":["vuejs"],"users":["matthewdavid"],"app":"steemit/0.1"}
created2018-01-14 08:37:45
last_update2018-01-14 08:37:45
depth1
children0
last_payout2018-01-21 08:37:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length77
author_reputation329,273,008,834
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,411,288
net_rshares0
@momslife · (edited)
$0.08
This is interesting, I would like to  take course of something like this, and you have a great idea growing on your mind.
πŸ‘  
properties (23)
authormomslife
permlinkre-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180114t072649530z
categoryvuejs
json_metadata{"tags":["vuejs"],"app":"steemit/0.1"}
created2018-01-14 07:26:51
last_update2018-01-14 07:27:03
depth1
children1
last_payout2018-01-21 07:26:51
cashout_time1969-12-31 23:59:59
total_payout_value0.082 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length121
author_reputation48,997,939,448
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,401,374
net_rshares9,435,650,861
author_curate_reward""
vote details (1)
@matthewdavid ·
There are a number of great courses. The Laracasts one that I mention in the post is a good place to start.

Have you had some experience programming before? If not, I'd be happy to share some of my experience and the resources I used while learning the basics.

Thanks for your comment!
properties (22)
authormatthewdavid
permlinkre-momslife-re-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180114t073328302z
categoryvuejs
json_metadata{"tags":["vuejs"],"app":"steemit/0.1"}
created2018-01-14 07:33:27
last_update2018-01-14 07:33:27
depth2
children0
last_payout2018-01-21 07:33:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length287
author_reputation2,155,255,892,877
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,402,216
net_rshares0
@steveblucher ·
$0.16
Again, you have taught me something, @matthewdavid - I also thought that the Vue.js dev tools were only available for Chrome, but since Mozilla’s Quantum update for Firefox, I much prefer this browser. 

Thank you for your continued posts.
πŸ‘  
properties (23)
authorsteveblucher
permlinkre-matthewdavid-getting-started-with-vue-js-my-first-steps-firefox-devtools-20180116t202243642z
categoryvuejs
json_metadata{"tags":["vuejs"],"users":["matthewdavid"],"app":"steemit/0.1"}
created2018-01-16 20:22:45
last_update2018-01-16 20:22:45
depth1
children0
last_payout2018-01-23 20:22:45
cashout_time1969-12-31 23:59:59
total_payout_value0.122 HBD
curator_payout_value0.037 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length239
author_reputation6,574,319,261,915
root_title"Getting Started with Vue.js - My First Steps - Firefox DevTools"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id30,019,286
net_rshares18,075,214,893
author_curate_reward""
vote details (1)