Vue scaffolding learning project creation method

1. What is scaffolding?

1. Vue CLI

Vue CLI is a complete system for rapid development based on Vue.js, providing:

• Interactive project scaffolding implemented by @vue/cli.
• Through @vue/cli + @vue/cli-service-global
• Zero-configuration prototyping is achieved.
• A runtime dependency (@vue/cli-service) that:
• Upgradable;
• Built on webpack with reasonable default configuration;
• It can be configured through configuration files within the project; it can be extended through plugins.
• A rich collection of official plugins that integrates the best tools in the front-end ecosystem.
• A fully graphical user interface for creating and managing Vue.js projects.

Vue CLI is committed to standardizing the basic tools in the Vue ecosystem. It ensures that various build tools can be smoothly connected based on intelligent default configurations, so that you can focus on writing applications instead of spending days worrying about configuration issues. At the same time, it also provides flexibility for each tool to adjust the configuration without ejecting

2. Features:

• Quickly and automatically create template projects
• Automatically install and configure the environment
  

3. Installation method

Note: On the premise of having npm tool

Open the terminal, enter the cmd command, and 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 version

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 - Custom 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 the view version

◉ Babel — Parsing JavaScript

◯ TypeScript — Parsing ts

◉ Progressive Web App (PWA) Support

◉ Router

◉ Vuex — State Management

◉ CSS Pre-processors

◉ Linter / Formatter — Code formatting

◉ Unit Testing — Testing plugin

◉ E2E Testing — Testing plugin

Step 3: Select routing mode (optional and adjustable later)

history — http://localhost:81/ Backend support

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

Step 4: Choose how to process CSS (select scss in node environment here)

sass/scss - node

Step 5: Code verification rules - Standard rules: 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 test module: Optional

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

Step 9: Project configuration file

package.json

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

Wait for the creation to complete the project architecture

3. Project Catalog Introduction

1. Root Directory

+ node_modules --- Dependencies of the project
+ public --- Basic page structure and static resources
+ src --- workspace, development environment
+ tests --- Tests
.browserslistrc --- Browser configuration
.editorconfig --- Editor configuration
.eslintrc --- Code formatting configuration
.gitignore --- File configuration ignored by git
babel.config.js --- Babel configuration
cypress.json --- Test related plugins
package.json --- Description of project dependencies
README.md --- Description file

2.src directory

+ assets --- static resources
+ components --- Components
+ router --- Routing
+ store --- state manager
+ views --- Pages
App.vue --- Main page structure
main.js --- The entry point of the program

Summarize

This is the end of this article about the project creation method of Vue scaffolding learning. For more relevant Vue scaffolding project creation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!