Project Creation Method of Vue Scaffolding Learning

1. What is scaffolding?

1.Vue CLI

Vue CLI is a complete rapid development system based on Vue. js that provides:

Interactive project scaffolding through @ vue/cli. Through @ vue/cli + @ vue/cli-service-global Implementation of zero configuration prototype development. 1 runtime dependency (@ vue/cli-service) that: Upgradable; Built based on webpack with reasonable default configuration; It can be configured through the configuration file within the project; It can be extended through plug-ins. A rich collection of official plug-ins, integrating the best tools in the front-end ecosystem. 1 fully graphical user interface for creating and managing Vue. js projects.

Vue CLI is dedicated to the standardization of the tool base in the Vue ecosystem. It ensures that the various build tools can be smoothly connected based on intelligent default configuration, so that you can focus on writing applications instead of spending days struggling with configuration issues. At the same time, it also provides flexibility for each tool to adjust its configuration without eject

2. Features:

Create template projects quickly, automatically Automatically install environment, configure environment

3. Installation method

Note: With the npm tool,

Open the terminal, cmd input instructions to download the global environment (it is recommended to download the global environment)

 npm install -g @vue/cli

4. Check the version instructions after downloading

vue --version

5. Upgrade

npm update -g @vue/cli

2. Project creation

Create a project

vue create myapp

Make choices according to the prompts

Step 1: Select the installation method-customize the installation

Default ([Vue 2] babel, eslint)

Default (Vue 3 Preview) ([Vue 3] babel, eslint)

Manually select features

Step 2: Select the module to install

Choose Vue version-Select View Version

Babel-Analysis of js

TypeScript-Analysis of ts

Progressive Web App (PWA) Support-Progressive support

Router-Routing

Vuex-Status Management

CSS Pre-processors-Style processing

Linter/Formatter-code formatting

Unit Testing-Test plug-in

E2E Testing-Test plug-in

Step 3: Select the routing mode (optionally adjustable later)

history-http://localhost: 81/backend support

hash-http://localhost: 81/#/No backend support required

Step 4: Choose how to handle css (here select scss for node environment)

sass/scss - node

Step 5: Code Validation Rules-Standard Rule: Standard

ESLint with error prevention only

ESLint + Airbnb config

ESLint + Standard config

ESLint + Prettier

Step 6: When to verify: When saving

◉ Lint on save

◯ Lint and fix on commit

Step 7: Select the test module: optional

Step 8: End-to-end test scenario: default

Step 9: Configuration file for the project

package.json

Step 10: Do you want to save the current configuration: Do not save

Wait for the creation to finish to complete the project schema

3. Introduction to the Project Catalogue

1. Root directory

+ node_modules--Dependency package for the project
public--Basic page structure and static resources
+ src--Workspace, development environment
+ tests--Test
. browserslistrc--Browser configuration
editorconfig--Editor configuration
. eslintrc--Code formatting configuration
. gitignore--File configuration ignored by git
babel. config. js--Configuration of babel
cypress. json--Testing related plug-ins
package. json--Description of project dependencies
README. md--Explanatory file

2. src Directory

+ assets--Static resources
+ components--Components
+ router--Routing
+ store--State Manager
+ views--Pages
App. vue--Main page structure
main. js--Entry to the program

Summarize