Setting Up the Development Environment
This section will briefly cover installing the required development environment for building our front end with Node and VueJS. A quick summary of what you will need is:
If you already have the tools and required software, feel free to skip over the instructions below
MacOS
Follow the steps below to get your development environment setup for developing the front end.
- Follow the nvm installation guide
- Install node version v10.11.0 (
nvm install 10.11.0) - The installation script should print out a set of exports to add to your
.bashrc, or.zshrcconfiguration to load nvm, be sure to add this, and reload your terminal
export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"4. Set your node version to v10.11.0 (nvm use 10.11.0)
5. Verify your node version is correct (node -v)
If you run into any issues reference the troubleshooting section for MacOS.
6. Install yarn via Homebrew (brew install yarn)
7. Use yarn to install the v.3.10.0 vue-cli tools globally (yarn global add @vue/cli@3.10.0)
8. Verify your vue-cli installation (vue -V or vue create test)
Linux (Ubuntu 18.04)
Follow the steps below to get your development environment setup for developing the front end.
- Follow the nvm installation guide
2. Install node version v10.11.0 (nvm install 10.11.0)
3. The installation script should print out a set of exports to add to your .bashrc, or .zshrc configuration to load nvm, be sure to add these, and reload your terminal window
export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"4. Set your node version to v10.11.0 (nvm use 10.11.0)
5. Verify your node version is correct (node -v)
If you run into any issues reference the troubleshooting section for Linux.
6. Follow the yarn installation guide for Debian / Ubuntu systems (you will need to import the GPG keys and add the APT repository to your system before running apt install yarn)
7. Use yarn to install the v.3.10.0 vue-cli tools globally (yarn global add @vue/cli@3.10.0)
8. Verify your vue-cli installation (vue -V or vue create test)
Setting Up the App Environment
With our dependencies installed we can begin creating the application. To create the initial project use the vue-cli tool installed in the last section. The vue-cli is a powerful tool that gives end users the ability to create new applications with custom or default configuration setups at a granular level. For our purposes, we will just take the default set up:
vue create test-application
Vue CLI v3.10.0
┌───────────────────────────┐
│ Update available: 4.1.2 │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
Vue CLI v3.10.0
✨ Creating project in ./book/test-application.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
yarn install v1.9.2
info No lockfile found.
[1/4] 🔍 Resolving packages...
✨ Done in 17.28s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.9.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 91.28s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project test-application.
👉 Get started with the following commands:
$ cd test-application
If you change directory into your newly created app, you will see vue-cli sets up our directory structure, package.json and linter settings. Turning to the package.json, the default configuration has provided us with BabelJS (a transpiler tool used to convert ECMAScript 2015+ code into a backwards compatible JavaScript in current and older browsers) and ESLint (a tool that analyzes your code against standard code style) dependencies as well as a host of useful commands like serve, build, lint, etc.
The starter application is a good place to make an initial commit, but, if you check the git log you will see that the vue-cli has already taken care of this for us. In that case, we can