macOS setup for Vue
Install macOS :P
Open terminal and run the follow command to install the latest version of Homebrew. This will also install the XCode utils if you don't have them already installed.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install git
Install Node Version Manager
Use the install script to install nvm. To do this, run the following in terminal.
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
Add nvm to bash profile
To make use of the Node Version Manager through its
nvm command, you need to add the following to your
Create a new file if it does not already exist.
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
nvm install node in terminal. Once installed, you should be able to run both
node -v and
npm -v to see their versions.
Install required node packages
In order to create (and use) Vue efficiently, we'll need some packages installed. You can use
npm i -g [package]
npm install --global) to install a package to be used globally by your system.
For Vue, we need the Vue CLI (for creating our Vue boilerplates) and eslint (for JS linting) from npm. To install these, run
npm i -g vue-cli eslint in terminal.
Create a test Vue app
In terminal, create and navigate to your workspace directory, and run
vue init webpack hello-vue to create a new project named
hello-vue, using the webpack boilerplate. Step through the setup guide and edit any info as needed (or just press enter for
Next, navigate into your project with
cd hello-vue and install the project's local dependencies by running
npm install (or
Run the app
You should now be able to run the app by executing the command
npm run dev - navigate to its running address in your web
browser and you should be greeted with the initial Vue app.