VUE Learning - Scaffolding Project

VUE component base

The root component APP is what we wrote in () before, but it is extracted into a separate APP object

component tree

Components are objects

How to register components

Register global components

app.component("component name", component) The middle part of the component name -

the structure of the .vue file will be clearer later, it is not written like this

At present, the way of writing can be improved, put the template in html to write and bind it with id

The logic of the global component

Because it is an object, all can have these methods!

component name

They are all named with -, the most commonly used, and the hump case is rarely used. The home-nav

html element is not case-sensitive when it is recognized, so it does not support the recognition of hump-named components, but it can be recognized if it is recognized in the template of the vue file.

Features of Global Components

Once registered, it can be used anywhere, and global components can be used in other components, and it will also be displayed, which is equivalent to calling between components

Local components (components are really commonly used)

Register in the app (root component), and write it in a way like methods and computed. At this time, these components can only be used in the root component, but these components cannot be called in other components.

If you want to use a local component in a component, you need to register this component in your own component to call

However, all the components that are actually developed will be written into the .vue file, so the above is just an example to introduce, in practice, it will not be written like this, because such code logic is very messy

Question: What

we hope is that the logic and the template are together in a component, so that we can find it at once

Vue development mode (how to write in real development)

I hope that the components can be achieved (here I think it is still necessary to separate from the idea of ​​jsp, it just writes components like this, which is convenient for modification, but not everything on the page is also kneaded together), but the vue file browser does not recognize it

, So you need a packaging tool to package it and then the browser can recognize it (I think this is like packaging it into a war package and then deploying it???)

Single File (SFC)

VUE CLI Scaffolding

I feel that this is not the feeling of creating a module in the idea, that is, moving the back-end things forward, or this is the general development idea. (The early stage is all foreshadowing, and finally leads to this scaffolding, which is very good, showing the role of scaffolding, why modular development is needed)

Introduction to CLI (CLI: Command Line Interface)

npm install global CLI

Preparations (download node.js and git)

git has been downloaded before.

I download node.js installation myself

nodejs understanding

What is nodejs ?
Now I think the best explanation is that nodejs is a JS language interpreter, so that JS can also be used on the back-end server. In the past, JS could only be executed in the operating environment such as the browser. With nodejs, you can It can also be executed in the background, so that js can get through the front and back ends.
Node.js is a Javascript runtime environment based on the Chrome V8 engine.
So Node.js is not a library, but a runtime environment, or a JS language interpreter.
(It is an environment for executing js. It contains the V8 engine of chrome, which is designed to be used as a web server.)

npm understanding

There are many JS developers, so there are many people who contribute open source code, all of which condense into npm, the largest software package warehouse in the world.
npm is the abbreviation of Node Package Manager, which means Node's package management system. Nodejs is now in full swing, and npm https://www.npmjs.com/ has contributed a lot. Here, if we want to implement various functions, we can almost find ready-made packages written by others, just use them directly.

installation process

Here I just look at the download process on the Internet, there are many, mainly to configure a global folder and cache folder, configure two variables, and change the address of the mirror, there are many online processes.
nodejs installation tutorial
Install the latest version of npm (the npm command is used on git in the video) and

you can use the npm command when you go to git to see it.

Then I downloaded the scaffolding in git, command: npm install @vue/cli -g (the following -g indicates that it can be used globally)

A problem before using nodejs command in vscode

When learning to use scaffolding, it is still a bit troublesome to configure nodejs and vue scaffolding. It is uncomfortable to think of these configurations. The first problem encountered is how to solve the use of scaffolding on vscode. First, download nodejs, and then in
git Configure the global npm to install the global CLI.
I thought it could be used, but then found that it could not
solve the VSCODE "because running scripts is prohibited on this system" error.
After learning from this blog, it really succeeded, and I am very happy

Use scaffolding steps

One more step in coderwhy is to ask him whether he needs to configure the mirror, and the variable configured in my node at the beginning is the mirror of Taobao, so there is no such question.

1. First check whether the installation is successful in vscode
2. Use the Vue create project name to create the project, pay attention to the underscore
3. Choose to use vue3, vue2 or manually select the new feature (preset: prediction), here choose manual configuration

4. Currently only Babel is used (Babel is a JavaScript compiler, which is mainly used to convert code written in ECMAScript 2015+ syntax into backward compatible JavaScript syntax,) other routes are currently not used, and can be selected later.
Click the space to select, a select all

5. Select vue3 learned in version 3.x

6. Choose where to put babel and other things, the independent configuration file is still package.json (choose independent, because it is convenient for configuration)

7. Do you want to put The thing you generated before is made into a prediction, which can be used directly later, without having to do it manually.

I choose yes, so enter a preset name and I set it to vuedemo.

The project is created successfully

. It looks like this

CLI project structure analysis (must be mastered)

jsconfig.json is for vscode. components are used to store components

package.json

package.json contains the modules needed to run the project, and it is a packaging configuration file. You must understand that
entering package.json to view
vue-cli-service is a package for webpack.
serve is to enable local services, and bulid is

to enter before entering the package project CD the project directory (you can also click on the file directory to open it in the integrated terminal)
(here is really the same as the linux command, it should be because nodejs is used as a server environment, so this command is used.) Enter
npm run serve will automatically help us package the current project and start the local service (here you can also see that nodejs is used as a server). The

first package will be slow, so wait patiently for
success. See the familiar 8080 port, It's really a server release, my family!

.browserslistrc for browser adaptation

It’s enough to understand it. Generally, the default

main.js is the main file.

real component usage

Only after importing and then registering can it be used.
Keep in mind:
the object passed into createApp is actually a component, and each application needs a "root component", and other components will be its subcomponents.

export and import in vue

The export default export command in Vue
has a name for the external interface, and the variable name imported by the import command from the module is the same as the name of the external interface of the imported module.
However, the variable name output by the export default command can be arbitrary. At this time, braces are not used after the import command.

The export default command is used to specify the default output of the module. Obviously, a module can only have one default output, so the export default command can only be used once.
Therefore, there is no need to use braces after the import command, because it can only correspond to the export default command.

jsconfig.json description (why it is used for vscode)

Here you need the knowledge of webpack
to understand this, but it is especially useful later. In order to better prompt the code

to configure the alias of the path, there is a problem here, that is, there is no prompt when writing the path alias utils, and vscode does not know that you are in webpack The alias configured in , so you need to configure it in jsconfig.json to let vscode know, which is why it is used to configure vscode.

Configure the path of utils in it, so it can be automatically recognized

Processing of templates in different versions of VUE (understanding)

I'm a bit confused about
the entire rendering process of vue.

All templates must be rendered . Webpack will process the vue file and convert it directly

to you. more succinct

After reading it, it is the difference between whether the compilation of the template is done by the vue source code, or by the vue-loador in the vue scaffolding for you. The vue called is different, which is the underlying thing of vue

vscode plugin

Volar has better support for vue3

new development model

To convert the development idea, the next step is to write each component, and the component tree composed of each component and the root component.
Because it is packaged by webpack, main.js is the entry point (here we need to learn webpack)

Scope issues with single-file style

It is indeed a problem, it is a global scope, so you need to add something

to add the scoped internal principle to the style of each single file

: add an identification number to the modified element of each single file, that is Now I know who it was that was modified.

vue error "'vue-cli-service' is not an internal or external command, nor..." solution (mainly encountered when importing other people's projects)

I met the previous answer from the brother of Boxing, which is very well written.
It is to npm install first. This command is an installation dependency (node_modules is a dependency, and it cannot run without it, so you can also pay attention to it before running it in the future)
vue reports an error" 'vue-cli-service' is not recognized as an internal or external command, nor..."

Vite creates a vue project

After entering npm init vue@latest, start to create the project.
The packaging efficiency is very high.

After entering the command, follow the prompts step by step from the project name to the various plug-ins required by the project. It is very concise and clear, which is easier to use than scaffolding

. Follow the prompts he gave to input step by step, first switch to the project directory, then install the dependencies (npm install), and run dev not serve, it will run successfully. The interface after

success

There are some differences between the configuration and scaffolding on vite, and it feels more reasonable overall.

And in the end, when the project was deleted, I found that there were a lot of things in the scaffolding project, and there were a lot less vites