Vue

Introduction

Vue.js is a popular JavaScript framework for building user interfaces, known for its flexibility and ease of use. This guide will walk you through a streamlined process to set up Vue on your Mac and use the Vue CLI (command-line interface) to create and manage your projects.

Why Install Vue CLI Locally?

  • Project Isolation: Each project gets its own Vue CLI version, avoiding conflicts.
  • Cleaner System: You won't clutter your global npm packages.

Prerequisites

  • Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed. You can verify this by running node -v and npm -v in your terminal. If you need to install them, download the Node.js installer from the official website (https://nodejs.org/).
  • A Code Editor: Choose your favorite code editor (e.g., Visual Studio Code, Sublime Text).

Installation Steps

Create a Project Directory:

mkdir my-vue-app
cd my-vue-app

Initialize Vue CLI (npx): The easiest way to install the CLI locally is using npx. This runs the Vue CLI without a global install.

npx @vue/cli create .
  • Follow the prompts to select your preferred project setup. You can choose a default preset (Babel, ESLint) or manually select features.
  • Choose whether to use npm or yarn as your package manager.

Start Development Server:

  • Vue CLI will launch a development server. You can typically view your app by visiting http://localhost:8080 in your browser.
	npm run serve  # Or 'yarn serve' if you chose Yarn

Understanding Local CLI Installation

  • Node Modules Directory: Your Vue CLI tools and dependencies are installed within your project's node_modules directory. This means you can use a different Vue CLI version for each project without interfering with others.
  • Running Commands: You can run commands by prepending them with npx:
	npx vue add router  # Add Vue Router
	npx vue inspect > output.js # Inspect project config
  • Alternatively, some editors, like Visual Studio Code, allow you to run npm scripts directly through their interfaces.

Essential Tips

  • Upgrade Vue CLI: When a new version of Vue CLI is released, use the npm update command within your project to get the latest features and improvements.
  • Package.json: This file lists your project's dependencies and scripts. Use it to customize your Vue project.
  • Explore Vue CLI Plugins: The Vue CLI ecosystem offers a vast array of plugins to add functionality like state management (Vuex), testing tools, and more. Use vue add <plugin-name> to install them.