Vue scaffolding learning project creation method

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!

You may also be interested in:
  • Detailed explanation of using vue scaffolding tool to build vue-webpack project
  • Detailed explanation of how to use vue-cli scaffolding to build a Vue.js project
  • Detailed explanation of vue-cli scaffolding project-package.json
  • Detailed explanation of the process of building a project with vue-cli3.0 scaffolding
  • How to quickly build a project using vue-cli (vue scaffolding)
  • Use vue-cli scaffolding tool to build vue-webpack project
  • Solve the problem that the routing view does not display after the Vue scaffolding project is packaged
  • How to use Electron-vue scaffolding to transform vue projects
  • Detailed explanation of building a project using vue scaffolding (vue-cli)
  • Detailed explanation of using vue-cli scaffolding to initialize the project structure under the Vue project

<<:  How to Customize Bash Command Prompt in Linux

>>:  Complete steps for uninstalling MySQL database

Recommend

Implementation of Vue counter

Table of contents 1. Implementation of counter 2....

Detailed tutorial on deploying Hadoop cluster using Docker

Recently, I want to build a hadoop test cluster i...

Examples of preview functions for various types of files in vue3

Table of contents Preface 1. Preview of office do...

WeChat applet scroll-view realizes left-right linkage effect

WeChat applet uses scroll-view to achieve left-ri...

Method of building docker private warehouse based on Harbor

Table of contents 1. Introduction to Harbor 1. Ha...

MySQL primary key naming strategy related

Recently, when I was sorting out the details of d...

The most comprehensive collection of front-end interview questions

HTML+CSS 1. Understanding and knowledge of WEB st...

Solution to the failure of loading dynamic library when Linux program is running

Unable to load dynamic library under Linux When t...

Detailed explanation of the use of MySQL select cache mechanism

MySQL Query Cache is on by default. To some exten...

The table tbody in HTML can slide up and down and left and right

When the table header is fixed, it needs to be di...

Tutorial on installing php5, uninstalling php, and installing php7 on centos

First, install PHP5 very simple yum install php T...