Creating your first project with Vue CLI_Vue.js 3 Cookbook-QQ阅读女生现言网

上QQ阅读APP看书，第一时间看更新

Creating your first project with Vue CLI

When the Vue team realized that developers were having problems creating and managing their applications, they saw an opportunity to create a tool that could help developers around the world. The Vue CLI project was born.

The Vue CLI tool is a CLI tool that is used in terminal commands, such as Windows PowerShell, Linux Bash, or macOS Terminal. It was created as a starting point for the development of Vue, where developers can start a project and manage and build it smoothly. The focus of the Vue CLI team when developing was to give developers the opportunity to have more time to think about the code and spend less time on the tooling needed to put their code into production, adding new plugins or a simple hot-module-reload.

The Vue CLI tool is tweaked in such a way that there is no need to eject your tooling code outside the CLI before putting it into production.

When version 3 was released, the Vue UI project was added to the CLI as the main function, transforming the CLI commands into a more complete visual solution with lots of new additions and improvements.

Getting ready

The pre-requisite for this recipe is as follows:

Node.js 12+

The Node.js global objects that are required are as follows:

@vue/cli
@vue/cli-service-global

How to do it...

To create a Vue CLI project, follow these steps:

We need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> vue create my-first-project

The CLI will ask some questions that will help with the creation of the project. You can use the arrow keys to navigate, the Enter key to continue, and the Spacebar to select an option:

? Please pick a preset: (Use arrow keys)
 default (babel, eslint) 
❯ Manually select features ‌

There are two methods for starting a new project. The default method is a basic babel and eslint project without any plugin or configuration, and the Manually mode, where you can select more modes, plugins, linters, and options. We will go for Manually.‌
Now, we are asked about the features that we will want on the project. Those features are some Vue plugins such as Vuex or Router (Vue-Router), testers, linters, and more:

? Check the features needed for your project: (Use arrow keys)
 ❯ Babel
   TypeScript
   Progressive Web App (PWA) Support
   Router
   Vuex
   CSS Pre-processors
 ❯ Linter / Formatter
   Unit Testing
 ❯ E2E Testing

For this project, we will choose CSS Pre-processors and press Enter to continue:

? Check the features needed for your project: (Use arrow keys)
❯ Babel
  TypeScript
  Progressive Web App (PWA) Support
  Router
  Vuex
❯ CSS Pre-processors
❯ Linter / Formatter
  Unit Testing
  E2E Testing

It's possible to choose the main Cascading Style Sheets (CSS) preprocessors to be used with Vue—Sass, Less, and Stylus. It's up to you to choose which fits the most and is best for you:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules  are supported by default): (Use arrow keys) Sass/SCSS (with dart-sass)   Sass/SCSS (with node-sass)  Less❯ Stylus

It's time to format your code. You can choose between AirBnB, Standard, and Prettier with a basic config. Those rules that are imported inside the ESLint can be always customized without any problem and there is a perfect one for your needs. You know what is best for you:

? Pick a linter / formatter config: (Use arrow keys)
 ESLint with error prevention only 
❯ ESLint + Airbnb config 
 ESLint + Standard config 
 ESLint + Prettier

After the linting rules are set, we need to define when they are applied to your code. They can be either applied on save or fixed on commit:

? Pick additional lint features: (Use arrow keys)
  Lint on save
❯ Lint and fix on commit

After all those plugins, linters, and processors are defined, we need to choose where the settings and configs are stored. The best place to store them is on a dedicated file, but it is also possible to store then on the package.json file:

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
 In package.json

Now, you can choose if you want to make this selection a preset for future projects so that you don't need to reselect everything again:

? Save this as a preset for future projects? (y/N) n

The CLI will automatically create the folder with the name you set in the first step, install everything, and configure the project.

You are now able to navigate and run the project. The basic commands on Vue CLI projects are as follows:

npm run serve—For running a development server locally
npm run build—For building and minifying the application for deployment
npm run lint—To execute the lint on the code

You can execute those commands via the Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows).

There's more...

The CLI has a tool inside it called Vue UI that helps in the process of managing your Vue projects. This tool will take care of the project dependencies, plugins, and configurations.

Each npm script in the Vue UI tool is named as Tasks, and on those tasks, you can get real-time statistics such as—for example—the size of the assets, modules, and dependencies; numbers of errors or warnings; and more deep networking data for fine-tuning your application.

To enter the Vue UI interface, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> vue ui