Vue.js 3 : Vue CLI Installation 👨‍💻

Welcome to Vue 3 Bangla course In this video, we have talked about Vue CLI and the Importance of a CLI tool. I have also shown a user-friendly way to install and use it. References --- Facebook Group: https://www.facebook.com/groups/454989038771601 Source code: https://www.bengalcoder.com/en/blog/vuejs-3-course Full Playlist: https://www.youtube.com/playlist?list=PLAyYPhceiWs88SMpxMytAmYgx9VFo8Nbo Node.js Download link: https://nodejs.org/en/download/ Vue CLI Docs: https://cli.vuejs.org/ STOP ✋ Don't go down there The most recent version of Vue CLI is version 3. It provides a new experience for Vue developers and helps them start developing Vue apps without dealing with the complex configuration of tools like webpack. At the same time, it can be configured and extended with plugins for advanced use cases. Vue CLI v3 is a complete system for rapid Vue.js development and prototyping. It’s composed of different components, such as the CLI service, CLI plugins and recently a web UI that allows developers to perform tasks via an easy-to-use interface. Throughout this article, I’ll introduce the latest version of Vue CLI and its new features. I’ll demonstrate how to install the latest version of Vue CLI and how to create, serve and build an example project. Want to learn Vue.js from the ground up? This article is an extract from our Premium library. Get an entire collection of Vue books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $9/month. Vue CLI v3 Installation and Requirements In this section, we’ll look at the requirements needed for Vue CLI v3 and how to install it. Requirements Let’s start with the requirements. Vue CLI v3 requires Node.js 8.9+, but v8.11.0+ is recommended. You can install the latest version of Node.js in various ways: By downloading the binaries for your system from the official website. By using the official package manager for your system. Using a version manager. This is probably the easiest way, as it allows you to manage multiple versions of Node on the same machine. If you’d like to find out more about this approach, please see our quick tip Installing Multiple Versions of Node.js Using nvm. Vue creator, Evan You, described version 3 of the CLI as a “completely different beast” from its predecessor. As such, it’s important to uninstall any previous version of the CLI (that is, 2.x.x) before preceding this tutorial. If the vue-cli package is installed globally on your system, you can remove it by running the following command: npm uninstall vue-cli -g Installing Vue CLI v3 You can now install Vue CLI v3 by simply running the following command from your terminal: npm install -g @vue/cli Note: if you find yourself needing to add sudo before your command in macOS or Debian-based systems, or to use an administrator CMD prompt in Windows in order to install packages globally, then you should fix your permissions. The npm site has a guide on how to do this, or just use a version manager and you avoid the problem completely. After successfully installing the CLI, you’ll be able to access the vue executable in your terminal. For example, you can list all the available commands by executing the vue command: vue You can check the version you have installed by running: vue --version $ 3.2.1 Creating a Vue Project After installing Vue CLI, let’s now look at how we can use it to quickly scaffold complete Vue projects with a modern front-end toolset. Using Vue CLI, you can create or generate a new Vue app by running the following command in your terminal: vue create example-vue-project Tip: example-vue-project is the name of the project. You can obviously choose any valid name for your project. The CLI will prompt you for the preset you want to use for your project. One option is to select the default preset which installs two plugins: Babel for transpiling modern JavaScript, and ESLint for ensuring code quality. Or you can manually select the features needed for your project from a set of official plugins. These include: Babel TypeScript Progressive Web App support Vue Router Vuex (Vue’s official state management library) CSS Pre-processors (PostCSS, CSS modules, Sass, Less & Stylus) Linter/ Formatter using ESLint and Prettier Unit Testing using Mocha or Jest E2E Testing using Cypress or Nightwatch