This article will take you to learn more about Vue scaffolding

This article will introduce you to vue scaffolding, talk about how to initialize Vue scaffolding, introduce ref and props, mixin (mixing), etc. I hope it will be helpful to everyone!

1. Initialize Vue scaffolding

1. Description

Generally choose the latest version of scaffolding

2. Specific steps

• ##Global installation of vue/cli scaffolding

• Switch to the project directory, run

  vue create and add the name of a non-mainstream library to create one vue project [Related recommendations: vuejs video tutorial, web front-end development]

• Run

  npm run serveRun the project on the server

The above is the local server address. If you have colleagues below, you can access the same LAN The address

• You can see that vue has created a hello word component for us by default

3. Analyze the project structure

#After you create a project with vue scaffolding, you will find that The following structure

First start with the files in the root directory. Needless to say, the first .gitignore is the ignored content uploaded by git
• babel.config, we know that babel downgrades js syntax in webpack to comply with compatibility, and the same is true for the function here
• Needless to say, the two json packages of package, lock is the package Some detailed information, including which packages have been downloaded, configuration entry files, and custom npm instructions are all here
• readme is an introduction to some basic operations of scaffolding

Enter our first folder src

• First of all, we often see the assets file directory, which usually contains are static resources, some unchanging pictures (logos), audio and video and other files

• Then you can see our main.js entry file, new Vue is in it, We also introduced our prime minister’s app that is worth less than ten thousand people

  

• Then all our components will be written under the components folder , except the app component

The last directory is our last step, our html file

• Officially placed in this directory, please note that the title tag uses the webpack plug-in that conveniently generates HTML, and then it has some syntax, which means that we go to package.json to get the name as our title

  Note: The html file does not need to introduce vue, and you can start running the project directly without introducing main.js

Put the single file component we wrote before Go in and start the server

There is an error here that has been bothering me for a long time. It stands to reason that the component name here is no problem

Knowledge vue official The recommended style is hump naming or - splicing. Logically speaking, there is no problem with a single word. After checking Baidu, I found out that this should be just a reminder. However, during the grammar check, the non-standard code reminder was regarded as an error. , after changing the name, it was successfully executed

4.render function

problem Throw: main.js cannot be parsed according to the standard writing method

The problem actually occurs in the vue package we introduced. When you open the vue package, you can find that if our vue package.json is defined, it uses es6 modularization. Import, Then the js file module is automatically introduced (the incomplete version of Vue, the incomplete one is the template parser)

Two solutions, One is to introduce the complete version of vue, which will not be considered here. The second method is to use this incomplete version of vue. There is no template parser. I also have something that can help us write web pages, render function, he It will accept a parameter, which is also a function. There are two formal parameters in this function, one is the label, and the other is the content. If this function is used as the return value of render, then it will help us write a web page

In the end, it can be abbreviated as arrow function, which is the one we see in main.js. Why is the parameter here only an app? Because if the parameter passed is a component, there is no need to pass our parameter. The content part, because the content is all in the

vue file is actually divided into two parts, one is the vue core (events, life cycle hooks , monitoring, etc.), one is our template parser

Look at the picture below

This version of our esm is es6 modular The reduced version of vue, the one with runtime is the running version of vue, which only contains core functions. The above two are the reduced version of vue imported by commonjs. With so many vue versions, only the middle one is the complete vue version

So why are we divided into so many versions? Because we need to take one thing into consideration, template parsing is used to parse the templates in our vue suffix file. This parser occupies one-third of the entire vue file, which is quite large. The most important thing is that in the end, our project When we go online and package it through webpack, it will automatically separate the files in Vue for us. What is the css part, what is the js part, and where is the html part? It will be divided into what our browser knows and what the client knows. There is no need for a .vue suffix. file, so the template parser has no effect at this time. If it is not used in the online project at all, why should I package it? It consumes resources

Why is it in other components such as app Can I write a template template?

Because the scaffolding has installed a parser for us that specifically parses the templates in .vue, main.js cannot be used

5. Modify the default configuration

Because our vue scaffolding is written based on webpack, so the configuration must be written in webpack.config.js, but vue gives her It is hidden, you need to enter vue inspect > output.jsThis output.js is just You can view all the configuration content in webpack.config.js

Pay attention to the red color Parts cannot be changed, only the pink part can be changed (for details, please refer to the vue cli official website configuration items)

How to modify it?

are all modified based on the file vue.config.js. Refer to the cli official website. For example, if you want to modify the entry file, find pages

Similarly, changing lintOnSave to false can turn off the grammar check, which means that the single-word errors encountered previously will be eliminated.

2. ref and props

1.ref (mark)

I have a requirement to click a button to display the above DOM element

The DOM operation does not conform to vue's specifications, so vue has an apiref

Equivalent to a substitute for id. All those configured with ref can obtain DOM elements through the $refs object, which are stored in this object, but note that If the ref is on the component label, then obtain It will be vc and it will be the vc

of this component. The difference between the id and the id is that the id obtained on the component label is the dom element

# of this component label. ##2.props

Let the component receive data from the outside

I used to write a component and want to reuse it, just copy and paste it in The following is enough

Then I have a request now, if I want to reuse your code, but I don’t call it this name , it’s not about what to do at this age. Our props will be used at this time. First of all, our data must not be written as fixed. It cannot be written in the data, but whoever uses this data will write it here. In the component tag

Generally, if such a line of parameters is written in the parent component, then the data needs to be sent to a place to save it. This place is a brand new configuration. Item

props, and it needs to be written in the subcomponent and must be in the form of an array

At this time we can change our data at will

This is reuse.

But there is still a small bug here. If I want to display the parameters you passed in in the form of plus one year, directly using age 1 in vue syntax is not possible. Why? Because the parameters we passed are The clear quotation marks are equivalent to passing a string. Age 1 will only treat it as a string splicing method. Here you can cleverly use a small method

to concatenate it. Dynamic binding is enough. Why, because after adding v-bind, the content in the quotation marks will be used as an expression and the return value will be given to the age. At this time, if the age goes to ➕1, there will be no problem.

But there is another problem. To solve the problem from the root, to limit the range of input values ​​here, you need to use the definition form of props. It has three definition forms. The direct array form just now is simple. Statement (

Develop simple statements using multiple )

• Receive data while limiting the type

  Simple statement needs to be written If the type is incorrect, the console will report an error. If it is defined,

• ##receives data while limiting the type. ➕Necessity➕Default value

For name and gender, first limit the type, and then set it as a required input item, which cannot be empty, age In addition to restricting the type, a default value is also set, that is, it can be filled in or left out, and the default value of 99 is used.

Note

Generally required and default do not appear at the same time. Why do you choose it yourself? There is also the fact that the data received by props cannot be changed If you have to change it forcibly, notice a point

The priority of props is higher than that of data

, use this One point, you can define a data in data, use this data to receive the passed age value, let our page display the age value in the data, and then the click event changes the value in the data

三.mixin（mix）

Extract the configuration shared by multiple components into a mixed object

It is defined that both components can complete a similar function

Is there any way to integrate the two methods and use them as one, which will be used at this time Our

mixin is mixed with

, and a js file is defined to be exported directly on demand. A variable is an object, and our methods are placed in it.

Then import our component on demand, and a brand new configuration item comes mixinsNote that there is s, and it is in the form of an array

After both components are matched, you can use a common method

What can be written in the mix? , you can write everything in the Vue.extend configuration item we established, including life cycle hooks, data data, etc., which is equivalent to adding this configuration item to your vc instance object, as long as you configure mixin mixing

Notes

• Mixes can be combined. Multiple mixes are exposed in the same js file. The component import corresponds to the mixin array configuration item. The name can be

• ##A principle: If If you don't have the configuration items, Mixing can give it to you, but if you have data, use your own data as the main one, like here, the final x is 666

• ##Special cases

  : Life cycle hooks are not restricted. If the hybrid is declared and you declare it yourself, then both will be executed, but the hybrid is executed first

• Global Mixing

  : The methods just mentioned are all local mixing, and there is also global mixing, which is written in the entry file and imported into the entry file, Vue.mixinTo configure, after such configuration, not only all the components in the mix, but also the app and vm instances will be included

4. Plug-in

is used to enhance Vue

is a js file, which will expose an object. The most important thing is It contains an

install method and the parameter of this method is the Vue constructor. The second parameter is the data we will pass in later

Standard writing

Abbreviated version:

# Regarding what can be written in it, now that the Vue constructor is obtained, there are too many things that can be written. Now, the filters, custom instructions, and the mixing just mentioned can be put here for global configuration. The most important thing is that you can write your own methods and write them to the prototype prototype object.

Then I Can the following vm or vc use this method? The principle here is somewhat similar to the middleware in Node.js. To customize the middleware, I defined req and res in the front. After registering, the following middleware Are you able to get this attribute method with routing? Now you don’t think it’s the next step, but it’s really like it.

The way to write mixin here: because our mix is ​​a configuration , any component will have these configuration items, so there is no need for components to import, register for use, etc., so there is no need to define a name. For global declaration mixing

After we configure plugins.js, we should import and register it in the entry file. A brand new api

Vue.use

looks like this It is very similar to Node, and the magic is that with such registration, both vm and vc can use the global filters and instructions defined in the plug-in install

, as well as the attributes and attributes added to the Vue prototype object. Method

• Verification

##You can see globally defined filters, custom instructions, mixins, including a method defined by yourself on the prototype object, all of which can be used

5.scoped style

Let the style take effect locally to prevent conflicts

The styles we write actually mix the styles of all components into one css file when packaging, so it is easy to encounter a problem at this time, the problem of duplicate names

Only required Adding an attribute scoped to our style tag is a quick solution. Its principle is to dynamically generate a randomly generated attribute for your component tag, and then match your css class name with the attribute selector to achieve a style that only belongs to you

• ##Special :

  • When we In the style of the App component, a class selector is written with a font color of red, which means that it is its sub-component. As long as the class is this class selector, this attribute can be used, but if you add a scoped to the style of the App Then,

    At this time, only the component tag of the App itself can use this, and the sub-components cannot be used.

  • Our style can specify the language to be used.

    You can specify a precompiled language, such as less, but it cannot be used directly. You need to install the corresponding parser

    Note: If the webpack of the scaffolding is the latest version 5 and above can install the latest version of less, otherwise install less than 8 (around 6.7), npm view webpack versionsYou can check which versions of this package currently exist

    Note that I didn’t say it above, The latest scaffolding has used the latest webpack

  

  #After installing

  less-loader, you can use less to write css

(Learning video sharing:

vuejs introductory tutorial, Basic programming video)

The above is the detailed content of This article will take you to learn more about Vue scaffolding. For more information, please follow other related articles on the PHP Chinese website!