Vue LEARNING Notes (9) Vue CLI

1, the introduction of

Vue CLI is a complete system for rapid development based on vue.js. It consists of three independent parts:

• CLI: A globally installed NPM package that provides commands for use in terminals
• CLI service: a partial installation in use@vue/cliNPM package in the project created
• CLI plug-ins: CLI plug-ins can provide optional NPM packages for projects

Here is the official document of Vue CLI: cli.vuejs.org/zh/guide/

2, installation,

> npm uninstall -g vue-cli
Copy the code

> npm install -g @vue/cli
Copy the code

> vue -V
Copy the code

3. Single-file components

Before we go into how to build a project using @vue/ CLI, let’s take a look at what a single file component (SFC) is.

Most of the time, we can define global components using Vue.component() and then specify a container element on the page with new Vue()

In addition to this approach, we can also define components using a file extension called.vue, which we call single-file components

Each.vue file contains three types of top-level language blocks:

• The template<template>

Each.vue file contains at most one

• The script<script>

Each.vue file contains at most one

Any webpack rules that match.js files will be applied to the contents of this

• style<style>

A.vue file can contain multiple

Any Webpack rules that match.css files will be applied to the contents of this

A simple example is as follows:

<! -- Hello.vue --> <template> <p>{{ greeting }}</p> </template> <script> export default { data: function () { return { greeting: 'Hello' } } } </script> <style> p { font-size: 10px; text-align: center; } </style>Copy the code

4. Rapid prototyping

> npm install -g @vue/cli-service-global
Copy the code

> vue serve --help
Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config

Options:
  -o, --open  Open browser
  -c, --copy  Copy local url to clipboard
  -h, --help  output usage information
Copy the code

> vue serve Hello.vue

DONE Compiled successfully in 5267ms

	App running at:
	- Local: http://localhost:8080
	- Network: http://172.20.10.12:8080
	
	Note that the development build is not optimized.
	To create a production build, run `npm run build`.
Copy the code

> vue build --help
Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config

Options:
  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component mode (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information
Copy the code

5. Create projects

1. We can usevue create project-nameCommand to create a project

> vue create mini-project
Copy the code

2. First, select a default template with two options (radio) :

• Default (Babel, esLint) : The default setting for creating a simple project
• Manually select features: Manual configuration suitable for use in production environments (this is required in most cases)

We chose Manually select features

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features
Copy the code

3. Then, select the feature you want to use. There are nine options (multiple options) :

• Babel: JavaScript compiler (default selected)
• TypeScript: a JavaScript superset
• Progressive Web App (PWA) Support: Progressive Web applications
• Router: indicates a Vue route
• Vuex: Vue status management
• CSS pre-processors: CSS pre-processors
• Linter/Formatter: Code style checking and code formatting (default selected)
• Unit Testing: Unit Testing
• E2E Testing: end-to-end Testing

We chose Babel, Router, Vuex, CSS pre-processors, and Linter/Formatter

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  (*) Babel
  ( ) TypeScript
  ( ) Progressive Web App (PWA) Support
  (*) Router
  (*) Vuex
> (*) CSS Pre-processors
  (*) Linter / Formatter
  ( ) Unit Testing
  ( ) E2E Testing
Copy the code

4. Next, select a routing mode for the Router with two options (Y/n) :

• Y: Use the history mode. The URL does not contain the # symbol, but requires background configuration support
• N: If hash mode is used, the URL will carry the # symbol, but the # symbol is not included in the HTTP request

Let’s choose n

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
Copy the code

5. And then, CSS pre-processors, there are four options (one option)

• Sass/SCSS (with dart-sass)
• Sass/SCSS (with node-sass)
• Less
• Stylus

We choose Less

? Pick a CSS Pre-processors (PostCSS, Autoprefixer ans CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus
Copy the code

6. Next, select Linter/Formatter, which has four options (single) :

• ESLint with error prevention only
• ESLint + Airbnb config
• ESLint + Standard config
• ESLint + Prettier

We chose ESLint + Standard Config

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

7. Next, choose when to test. There are two options (multiple options) :

• Lint on save: save detection
• Lint and fix on commit: checks on commit

We’ll go to Lint on Save

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> (*) Lint on save
  ( ) Lint and fix on commit
Copy the code

8. Next, choose where to save the configuration file. There are two options (one option) :

• In dedicated Config files: Save the files as config files
• In package.json: All saved In package.json file

We select In dedicated Config files

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow  keys)
> In dedicated config files
  In package.json
Copy the code

9. Finally, choose whether to save this configuration for next use. There are two options (y/N) :

• Y: Save the configuration
• N: Do not save the configuration

Let’s choose N

? Save this as a preset for future projects? (y/N)
Copy the code

After that, we can wait for @vue/ CLI to create the project for us

6. Project structure

+ mini-project + node_modules + public - favicon.ico - index.html + SRC (where we write our own files) + Assets + Components + Views - app.vue - main.js - router.js (Route management: Router) -store.js (state management: Vuex) -package. json (project configuration file) -package-lock. json (project configuration file) -babel.config. js (Babel configuration file) -postcss.config (postCSS configuration file) - Readme.md (Project Description Document) -... (Other configuration files)Copy the code