Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Introduction/Scaffolding introduction and Functions:

Vue-cli Scaffolding official Chinese document: cli.vuejs.org/zh/guide/

1. What is vue scaffolding?

  1. It is a specialized single page (SPA) application to quickly build complex scaffolding, it is based on the foundation of the Development of a Webpack can quickly help us to build a project directory for developing VUE, structure (vUE and Webpack project template).

  2. Vue scaffolding is often used on large projects to speed up our development. Scaffolding is not recommended for small projects, because it will slow down the development of our project.

2. Why is there vUE scaffolding?

  1. Because webpack configuration is cumbersome, preventing a group of developers who want to use VUE but do not know Webpack, so the authors directly write all the configuration used in vUE projects for you, so that there is no need for developers to configure the basic Webpack configuration items.

  2. In other words, with vuE-CLI as the scaffolding tool, we don’t have to worry about webPack configuration anymore, we just need to write vUE code on the front end to implement the function.

What is a.. vue file?

  1. Vue files are single-file components.

    A. What is a single-file component? Files with the suffix.vue.

    B. The three components of a single file component (code block: scaffold automatically prompts).

    • Template (template structure)
    • The code logic of a Script component
    • Style style

  2. Note:

    Single-file components cannot be used directly in the browser. They must be processed by webpack before they can be used in the browser

4. Basic development process of VUE scaffolding:

1. Basic use and understanding of scaffolding:

1.1 Installation/Upgrade:

// Install NPM i@vue /cli -g // Upgrade NPM update -g@vue /cli // View the current scaffold version vue -v // Install the specified version NPM I -g@vue/cli@version numberCopy the code

1.2 Creating a Project:

Vue create my-project // Customized name vue create Project nameCopy the code

1.2.1 Select what type of project to create by keyboard up and down:

  1. Create a VUe2 project
  2. Create a VUE3 project
  3. Or customize the configuration project

Note: You can also add and uninstall plug-ins in the created PROJECT UI interface

1.2.2 Creating a VUe3 Project:

Some people might display this, asking what command line statements will be used for this project

Create good after

1.2.3 Custom Configuration Installation:

Select the plug-in to be installed in the project, select up and down on the keyboard, select the space, cancel, press Enter next

  • Choose Vue Version Indicates whether to select the scaffolding Version to install. Version 2.0 is created by default
  • Babel is a javascript compiler
  • TypeScript supports source writing in TypeScript
  • Progressive Web App (PWA) Support PWA Support
  • Router Supports vue-router.
  • Vuex supports Vuex.
  • CSS pre-processors CSS pre-processors are supported.
  • Linter/Formatter supports code style checking and formatting.
  • Unit Testing whether to Unit test (specific Baidu)
  • Whether E2E Testing is automated (specific Baidu, I do not understand what the meaning of)

Note: If you have not selected the configuration and press Enter, you can Ctrl+D to exit the creation

1.2.4 Customized Configuration Detailed Installation Process Options:

I. Select version (select 3.x here)

II. History mode selection (mainly the difference between the # symbol at the end of the url)

Select y and the # will be added to the url

N On the contrary

III. Which CSS preprocessor language to use

Sass two version resolution

  • Node-sass is a compilation of Sass using Node (libsass written by calling CPP).
  • Dart-sass uses the DRAT VM to compile SASS.
  • Node-sass is automatically compiled in real time. Dart-sass needs to be saved before it takes effect.
  • Dart-sass is recommended for better performance (it is also officially used by SASS), and Node-Sass is often not installed due to national conditions

IV. Syntax detection selection

Select EsLint + Prettier

V. When will the test be conducted

  • Test on save (recommended) – test on submit

VI. Select a configuration file

  • Option 1: Create a special folder for storage – Option 2: Put them in package.json (it is recommended to put them in the same folder for later management)

VII. Whether to save the previous configuration

  • Y save
  • N Do not save the configuration. (After the configuration is saved, a naming prompt is displayed to name the current configuration. After that, the saved configuration name will appear in each build project.

VIII. The installation is complete

After the creation is complete, skip to 1.5 to see

VIII. Install other dependent items if required

npm i –save axios

Can also be

Vue add axios // Vue add needs to install the dependency name

You can also use vuE-UI to install project dependencies (personal recommendation)

1.3 Use VUE-UI to create/manage projects:

Vue UI // Enter the UI after terminal inputCopy the code

Vue-ui interface :(default English, can be translated into Chinese using browser translation plug-in)

It is much easier to create projects using vuE-UI, and all creation is visualized

Start to create

Details set

Presets start just as they were created on the command line

After selecting manual, configure the project yourself

All options and actions are UI

Whether to save preset

Create good after

1.5 Operation instructions:

// Switch to the project folder: CD my-project // Run the project: NPM run serve //yarn mode yarn serve // run the project to display these two lines of url // the first one can only be opened on your computer -local: http://localhost:8080/ // Second, as long as the same Network with the computer, other devices can also be opened // sent to the mobile phone available to open the mobile phone - Network: / / http://192.168.2.139:8080/ to view the default installation project depends on the NPM ls - the depth 0Copy the code

Interface after normal operation (PC) :

Mobile client:

Type Ctrl+ C to close the project

Packaging project

npm run build
Copy the code

After the package is successfully packaged, the project file will have the dist folder

1.6 File and Directory Resolution:

  1. Node_modules: The dependencies for node installation (Vue scaffolding is large because node dependencies are configured,

The real project ontology is the packaged Dist folder.

  1. Dist: Packed folder
  2. Public: public static resources. Any static resources placed in public are simply copied without webpack processing.

Generally used to store static resources that do not change and Webpack files and unsupported third-party libraries

  • Favicon. ico: Default icon
  • Index.html :(vue scaffolding has specific file formats that will be recognized when packaging. This file name cannot be changed. If it is changed, an error will be reported at runtime

If you want to change, you need to modify the corresponding configuration file.)

  1. SRC: the file and folder where the code is stored (develop and write code in this folder)
  • Asscts: Store static files (images/fonts/CSS, etc.) in your project
  • Components: Holds custom components (widgets and common components) in a project
  • Views: Stores large components, page-level components, and routing components
  • Router: Stores routing (VueRouter) files
  • Store: Stores Vuex (state manager) related files
  • App.vue: The root component of the project (the page presented by the project)
  • Main.js: entry file for the project
  1. .gitignore: Git ignores files (because git uploads ignore empty folders)
  2. Babel.config.js: Babel-related configuration files (converting ES6 syntax into code that browsers can recognize)
  1. Package. json: Vue scaffold description file, information and run, package instructions, plug-in information are here
  2. Readme. md: Project description

1.7 Install scaffolding additional plug-ins:

Create a new.js file in the scaffold directory (the same as package.json) :

Exprots = {// Module export // Plug-in to be installed: devServer:{// Configuration information port: 8080, // port number host: 'localhostl', // address open: True // Automatically open the browser}}Copy the code

1.8 VUE scaffold folder and document details:

Main. Js file details:

//es6 import file import Vue from 'Vue' // import Vue import App from './ app.vue '// import app.vue page /* productionTip set to false, In a development environment, VUE provides many warnings to help you deal with common errors and traps. In a production environment, these warning statements are useless and increase the size of the application. In addition, some warning checks have some small runtime overhead, This can be avoided in production mode */ vue.config. productionTip = false // This Vue instance is loaded in typical ES6 style new Vue({router,// mount route store,// mount Vuex state management Render: h => h(App) //render; Load the app.vue page; H for hypersript (superscript)}).$mount('#app') // Manually mount this vue instance to #appCopy the code

App.vue (single file component) page details:

<template> <div id='app'>... </div> </template> // Component control area <script> import component name from './ Components /component name. vue'// import component name // global component definition Vue.component(' component name ', component name);  Export default{// expose the current root component named 'APP' and the root node above is 'APP' name: 'App', data(){return{// store component data}} components:{// define component name :{template: XXX}}} </script> Note: The styles here, as well as the styles of the Views and Components, are global styles. <style scoped lang="sass">//lang=" what CSS preprocessor language to use "... </style>Copy the code

Index.js file in router folder

// Import file import... // Const routes = [...] // Instantiate const router = new VueRoutter({routes}) // Export export default routerCopy the code

Views folder:

Holds large page-level components

<template> < define widget name MSG =" value passed to widget "/> </template> //js code <script> // import widget name from 'widget path' // define widget export Default {name: 'component name ', comoponets:{component name}} </script>Copy the code

Components folder:

Store various widgets within the page

// page content <template> Widget content (HTML code) </template> //js code export default{name: 'widget name ',// Do not name it with _, because you also need to use props in the tag: < span style = "box-sizing: border-box! Important; </style>Copy the code

Asscts folder:

Store all static files in your project (images, font files, etc.)

Ii. Vue page development using scaffolding:

1. Add components

Add the test. vue file to the views folder

Add VueTest. Vue to components folder

File index.js in the router folder

App.vue root component page

Effect of the page