Single file components are often used in actual development, so how to create a single file component? So in this article, we will briefly introduce the single-file component.

1. Create a single file component

1. Switch to the directory where you want to create the file. I am switching to the desktop directory. Of course, it is also You can switch according to your own needs. The command is cd directory/file name

2. Open cmd and enter npm config set registry //m.sbmmt.com/link/591d4b6b2ae94b362529d9dcbe8ea63f Switch/set to Taobao mirror. [Related recommendations: vuejs video tutorial, web front-end development]

Install global vue scaffolding (simple and convenient to use anywhere)npm install -g @vue/cli

See the following content to indicate successful installation

3. Use the vue create project name to create a project. After success, there will be a vue version to choose from (press the down arrow on the keyboard to switch). Here we choose Vue2

After the command is executed, if it looks like the picture below, it means the creation is successful (very considerate, the first line of blue code below is to switch to the directory where the creation was successful, and the second line is to run the vue project)

4. After successful creation, the project will come with a project as shown in the picture below (at this point, a vue project based on scaffolding is completed)

5. You can directly search for the file you just created, and then drag it directly into vscode (there are the following files). We can find the components folder under src, and there is a file named HelloWorld.vue in it. file, here is the code for the above picture

The following is a brief summary of the files in the project, file creation It's over, we have to know what this is for,

Curious friends will find a problem, that is, there is a vue file under node_module, which The file also contains various versions of vue, such as: vue.js , vue.runtime.js, etc. Stacking vue versions, let’s take a look at the differences between them

Second, about different versions of Vue

## The difference between #vue.js and vue.runtime.xxx.js

renderThe createElement function received by the function specifies the specific content.

Three, vue.config.js configuration file

Use vue inspect > output.js to view the Vue scaffolding default allocation.

Use vue.config.js to customize the scaffolding (the following is the configuration of vue.config.js for reference)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

Four, ref attribute

1. It is used to register reference information for elements or sub-components. It can also be said to be used to replace id

2. Applied in htm1 What is obtained on the label is the real DOM element, and what is applied to the component label is the component instance object(VueComponent )

• Usage: Mark:

  ....

  or < /School>Get: this.$refs. xxx

##Five, configuration item props

Let the component receive data from the outside

  props: ["name"]

  props: {
    name:string,
    age:Number
  }

  props :{
    name : {
    type:String, //类型
    required:true, //必要性
    default:'老王' //默认值
    }
  }