Vue is a single-file component

Director: What are the disadvantages of registering components before?

1- Lack of syntax highlighting 2- poor formatting overall 3- no specific CSS code to write etc

Reference: vue => Tools => Single file components

  1. What is a single-file component? Files with the suffix.vue
  2. 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
  1. 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

Two: scaffolding introduction

Scaffolding 2.x ==> 2.xvue

3.X ==> 3.X vue

  1. Vue-cli is vUE’s scaffolding tool

  2. Vue – CLI provides a command that can be used directly to quickly generate a VUE project (vue init XX). The basic structure of the project and the WebPack configuration items are all configured

  3. Why are there scaffolding tools??

    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

  4. 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

Three: the use of scaffolding tools

  • Installation:npm i -g vue-cli
  • Initialize the VUE project:Vue Init Webpack project name
    • Such as:vue init webpack vue-demo01
  • Project installation process:
? Project name # enter? Project description # enter? Author # enter? Vue Build standalone # => Runtime + compile => See question 1 below? Install vue-router? # Yes (manual installation recommended)? Use ESLint to lint your code? # Yes => See question 2 below? Pick an ESLint preset Standard # standard ? Set up unit tests # No ? Setup e2e tests with Nightwatch? # No ? Should we run `npm install` for you after the project has been created? # (recommended) npmCopy the code

(summary: if there is test, there is n)

  • How to start
To get started:

cd vue-demo01
npm run dev
Copy the code
  • "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    • — Inline means where is the information displayed
    • – the progress bar
    • Specifies which file is developed as a webPack configuration file

Iv. Introduction of documents and projects

The first time: folder, the second time to refine the file

Check node, NPM, etc. - util. Js build tool - vue-loader.config.js Vue - Loader configuration file - webpack.base.conf.js - Basic configuration of webpack - webpack.dev.conf.js - Webpack development environment configuration - webpack.prod.conf.js - # config-vue basic configuration files (e.g., listening port (17), Using eslint:(26)) -dev.env.js - development environment variables - some configuration of the index.js project - prod.env.js generates the environment variable # node_modules-node installed dependency package # SRC - Resources folder, From now on we will write code in this directory - Assets - static Resources (image CSS is put here) - Components - common component - router - Route - app. vue - project root component - main.js - Gitkeep git files, because git uploads will ignore empty folders #.babelrc -babel config files, #. Editorconfig - Define code format - charset = UTF-8 encode UTF8 - indent_style = space indent space - Indent_size = 2 Indent character -end_of_line = LF Carriage return as a line newline mark -insert_final_newline = true The latest blank line ends - trim_trailing_whitespace = True Clears initial whitespace - if using? -1. Install vscode editorConfig for VScode - 2. eslint after fix #.eslintignore - eslint detects ignored places - /build/ - /config/ - /dist/ - /\*.js: #.eslintrc.js-eslint configuration file #.gitignore - gitignore file #.postcsrc Index.html - page entry # package.json - project configuration fileCopy the code

4.1 Reference: Standard

  • Standard code specification

4.2 Reference: SRC

  • Assets Static resources

  • The components components

  • App.vue Root component => Specify the route egress

    • After scaffolding, all components will be rendered to app.vue

  • App.vue overwrites #app in app or #app in index.html, which can be verified by adding the title attribute separately

  • Routing outlets are written in the app.vue component template

  • main.js

    • Entry JS file
    • Purpose: Create a VUE instance, import other components and hang them on the Vue instance
    • Vue.config.productionTip = falseDon’t print prompts
    • Detection no new: See detection warning later
    new Vue({
  el: '#app'.// Target display
  router,   // Mount the route
  components: { App }, // Register the component App
  template: '<App/>' // The template displays the component app
})
Copy the code

  • The route/index. Js = > routing

  • It is important to remember that vue. use(Router) modular public projects must install routing plugins

  • https://router.vuejs.org/zh/installation.html also mentioned in the website

4.3: Draw logical diagrams (introduce several entry files for the project)

Five: problem handling

5.1 – Problem 1: Two compilation modes and @

Reference: vue.js => Install => explanations for different builds of this version

  • We chose Runtime + Compiler mode: (Runtime + editor)
  • Runtime mode: Code used to create Vue instances, render and process virtual DOM, and so on. Basically everything else is stripped out of the compiler.
  • Compiler: Code used to compile template strings into JavaScript rendering functions.
// A compiler is required
new Vue({
  template: '<div>{{ hi }}</div>'
})

// No compiler is required
new Vue({
  render (h) {
    return h('div'.this.hi)
  }
})
Copy the code
  • Complete version selection: ES Module (based on build tools) : vue.esm.js
    • Build => webpack.base.config.js => alias(alias) ‘vue$’: ‘vue/dist/vue.esm.js’,
  • @: is the absolute path of SRC
    • Build => webpack.base.config.js => 38 line alias(alias) ‘@’: resolve(‘ SRC ‘),
router/index.js =>
	import HelloWorld from '@/components/HelloWorld'
	import HelloWorld from 'C:/users/... /src/components/HelloWorld'
Copy the code

5.2 – Problem 2: ESLint

  • Concept: ESLint is a tool for identifying and reporting pattern matches in JavaScript code. Its goal is to ensure code consistency and avoid errors.

    • In editing tools such as vscode, you can prompt for syntax errors

    • In many ways, it is similar to JSLint and JSHint, with a few exceptions:

  • How do I use ESLint?

    • 1- install the vscode plugin ESlint
    • 2- add some configuration to vscode Settings
     "editor.formatOnSave": true.//# automatic formatting every time you save
  "eslint.autoFixOnSave": true.// # fix the code in ESLint format every time you save it
  "eslint.validate": [{"language": "html"."autoFix": true },
    { "language": "vue"."autoFix": true },
    { "language": "javascript"."autoFix": true },
    { "language": "wpy"."autoFix": true}]."prettier.eslintIntegration": true.// # let Prettier use esLint's code format for validation
  "prettier.semi": true.//# remove the semicolon at the end of the code
  "prettier.singleQuote": true.//# replace double quotes with single quotes
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true."editor.formatOnType": true //# add a space between the function (name) and the following parentheses
Copy the code

  • Close the Eslint:

    • Reference: config/index.js ==> line 26:dev.useEslintSet to false
    • Restart project:npm run dev
    • Test: removing /* eslint-disable no-new */ from main.js will result in wavy lines but no errors

5.3 Fault 3: VScode installs the formatting plug-in Prettier

  • Install the vscode plug-in Prettier

  • Function 1: Shift + Alt + F => Format code

  • Function 2: Cooperate with ESLint: See the configuration in the previous question

5.4 Problem 4: Detection warning

Eslint-disable # Ignore the start of new for the entire file. Eslint-disable no-newCopy the code