Appendix A. Setting up your environment
Developing without the right tools is like exploring a cave without a flashlight: it will get done, but you’ll be in the dark the whole time. That said, if you already have the tools that are covered in this section, or alternatives you feel comfortable with, skip to the next section.
A.1. Chrome Developer Tools
Far and away, our “best buddy” on this journey will be the Chrome Developer Tools. If you haven’t done so, install the Chrome browser. You can find it at https://www.google.com/chrome/. You can access the Developer Tools from the browser menu at View > Developer > Developer Tools or by right-clicking a page and choosing Inspect as seen in figure A.1.
Figure A.1. The default view of Chrome’s Developer Tools pane shows the HTML markup of a web page, and the CSS styles attached to a selected element.
When you inspect your code, you’ll use the JavaScript console in Developer Tools most frequently. You can switch to it using the Console tab or open it directly from the menu at View > Developer > JavaScript Console.
You can even bring up a console while looking at any other tab in the Developer Tools by pressing the ESC key, as seen in figure A.2. This allows us to do things like look at the HTML while we manipulate it from JavaScript.
Figure A.2. The JavaScript console lets us inspect and interact with HTML markup as well as the JavaScript of our Vue application.
A.2. vue-devtools for Chrome
The core Vue team has developed a Chrome extension—vue-devtools—that’s tailored to the task of inspecting Vue applications at runtime.
You can install the vue-devtools extension from the Chrome Web Store by visiting http://mng.bz/RpuC. The adventurous can build the extension from—and hack at—the code itself by cloning the GitHub repository located at https://github.com/vuejs/vue-devtools.
Post-Installation Note
Chrome can be a little finicky right after an extension has been installed. If you open the Developer Tools pane and don’t see a Vue tab after you install the extension, try opening a new tab or window before restarting Chrome.
After you’ve installed the extension, you need to enable it for use on local files, because we won’t use a web server for the first few chapters. In Chrome, select Window > Extensions, then locate the Vue.js devtools entry. Tick the Allow access to file URLs check box and you’re all set, as seen in figure A.3.
Figure A.3. Enabling vue-devtools to work with local files requires updating settings in the Extensions preference page.
After installing the extension, we can see data used by our application, isolate specific components from our application, and even time travel! It allows us to go back and replay activity that previously took place in our app, at least. Figure A.4 shows all the parts of the extension.
Figure A.4. The vue-devtools extension lets us explore our Vue applications in real time.
A.3. Obtaining a chapter’s companion code
The source code for this book is available to download from the publisher’s website (www.manning.com/books/vue-js-in-action). Chapter code is available on GitHub at https://github.com/ErikCH/VuejsInActionCode. If you have any questions or find any mistakes, feel free to open an issue! This is also where you’ll find all the pictures for each chapter.
A.4. Installing Node.js and npm
In the book we’ll need Node.js and npm so we can use the Vue-CLI tool and have access to the hundreds of thousands of modules available. It’s recommended that you download either the current or LTS (Long Term Support) version of Node. Either one will work fine.
Here are a few approaches that you can use to get Node, which includes npm:
- Homebrew or MacPorts— This is a popular choice for Mac OS users.
- One-click installers— Windows and Mac both have this option.
- Install using the Linux package management system— Yum, apt-get, or pacman can be used to install Node on a Linux environment.
- Install using NVM— NVM (Node Version Manager) is a script that helps manage Node.js versions. It’s available for Windows and Mac. It’s a great option.
A.4.1. Installing Node.js using one-click installers
By far, one of the easiest ways to download Node.js is using a one-click installer. Head over to http://nodejs.org/en/download. Choose your version of Windows or Mac, 32-bit or 64-bit, and download the .msi for windows or .pkg for Mac as seen in figure A.5.
Figure A.5. The homepage to download Node
A.4.2. Install Node.js using NVM
NVM is another excellent choice. NVM is a script that helps manage multiple active versions of Node.js. You can install Node.js without even having to visit the website. The script separates each version of Node that you download. I recommend this to most beginners, although you need to understand how to use the command line. You can find NVM at https://github.com/creationix/nvm. A Windows version can be found at https://github.com/coreybutler/nvm-windows/releases.
To install NVM on a Mac, open the command prompt and run this command:
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh| bash
This will download the latest version of NVM.
To install NVM on a Windows system, click on the nvm-setup.zip file on the nvm-windows release webpage. Unzip the files and run the nvm-setup.exe file.
After installing NVM or NVM for Windows, run this command to download the latest version of Node.js.
$ nvm install node
That’s it! Now you have Node and npm installed on your system!
A.4.3. Install Node.js via Linux package management system
All major Linux distributions offer Node.js packages in their repositories. For example, in Ubuntu you can use apt-get:
$ sudo apt-get install nodejs
In Fedora, you can use yum:
$ yum install nodejs
You need to check with your Linux distribution to find out more details on how to install packages on your system. Keep in mind that certain distributions may have outdated versions of Node.js available for download. In that case, you might be better off with NVM or downloading Node.js from the official website.
A.4.4. Install Node.js using MacPorts or Homebrew
Macports and Homebrew are package management systems for the Mac. To download Node.js, you need to first install Macports or Homebrew. You can find the latest information on how to install Homebrew at http://brew.sh and Macports at www.macports.org.
After you have one of these package managers installed on your Mac, you can run the following command to install Node.
For Homebrew:
$ brew install node
$ sudo port install nodejs
You should be good to go after this!
A.4.5. Verifying that Node is installed
To test the installation of Node.js run the -v command:
$ node -v $ npm -v
These commands will display the current version of Node and NPM installed. As of this writing the latest LTS version is 6.11 and the latest current version is 8.2.1.
A.5. Installing Vue-CLI
Before installing Vue-CLI make sure you have at least Node.js >= 4.6, 6.x preferred, npm version 3+, and Git. In chapter 11, we use Nuxt.js. In that case, make sure to have Node.js >= 8.0. Vue-CLI will work fine either way. Follow the previous instructions to install Node. To install Git, follow the instructions on the official Git website at http://mng.bz/D7zz.
After installing all the prerequisites, open a terminal and run this command:
$ npm install -g vue-cli
Running commands in Vue-CLI is easy. Type in vue-cli init template name and then the project name like this:
$ vue init <template-name> <project-name> $ vue init webpack my-project
That should be it.
Note, as of the writing of this book, Vue-CLI 2.9.2 is the latest version. The newest version of Vue-CLI 3.0 is still in beta. For information on how to install and work with Vue-CLI 3.0, follow the official guides at http://mng.bz/5t1C.