First of all, welcome, leave vue novice village!
table of Contents
1. Uninstall the scaffolding before
3. Scaffold 3 is compatible with scaffold 2
Three, create a scaffold 2 test project
Four, some basic understanding of scaffolding
2. The difference between runtime-compiler and runtime-only
3. Scaffolding 3 Create project and directory structure
4. Configuration file of scaffold 3
1. Basic use of arrow functions
2. Arrow function parameters and return values
3. The use of this in arrow functions
One, what is vue scaffolding
The so-called scaffolding is Vue CLI
It can help us complete the code directory structure, project structure and deployment, hot reloading, unit testing and other things. You can quickly build the Vue development environment and the corresponding webpack configuration
1. To use scaffolding, you need to install node.js first. Baidu
2. Based on webpack
Second, install scaffolding
1. Uninstall the scaffolding before
npm uninstall vue-cli -gAfter uninstalling, check if there are any residues:
vue -VIf so, check the following link, the pro-test is valid:
https://blog.csdn.net/manmanwei/article/details/107686844
2. Install version 3.2.1
npm install -g @vue/[email protected]
3. Scaffold 3 is compatible with scaffold 2
npm install @vue/cli-init -g
4. Create the project
Scaffolding 2 initialization project:
vue init webpack my-projectScaffolding 3 initialization project:
vue create my-project
Three, create a scaffold 2 test project
To facilitate our understanding, we choose no for those places
We have created two projects here:
Run one first and enter cli2-use:
First of all, our project is started.
Four, some basic understanding of scaffolding
1. Closing of ESLint
The ESLint specification is really BT, and the back-end java programmers said it is too difficult and must be turned off. Then, how to close:
Change true in useEslint in config=>index.js to false
2. The difference between runtime-compiler and runtime-only
(1) runtime-compiler (corresponding to Vue Build standalone when creating a project):
First of all, we need to know that the data in the template will be internally parsed and turned into an abstract syntax tree, and then the abstract syntax tree will be compiled into a render function, and then the render function will be transformed into a virtual DOM, and then the virtual DOM will be transformed into a real DOM. Real UI.
(2) runtime-only (corresponding to Vue Build runtime when creating the project) ( preferred choice ):
render=>virtual DOM=>real DOM
The template in the .vue is not in the rendering object: because the internally loaded vue-template-compiler has converted the corresponding template into the render function, so the App object on the right, when we get it, its internals are render Function without template object
(3) Comparison of the two:
*1) Runtime-only performance is higher (less steps passed)
*2) Less runtime-only code
(4) runtime-compiler can also omit the step of abstract syntax tree
Through the createElement method, the original <div id='app'> can be replaced
createElement can not only put tags, but also components. Let's customize a component and see what effect:
Since you can put custom components, you can also put components that already exist:
3. Scaffolding 3 Create project and directory structure
vue create my-project(1) We first select Manually select features.
You can see that there is a xupeng option, this is what we did last time
(2) Cancel Linter/Formatter
Just press the "down" button, then come to this line, press the space bar, to cancel the selection
(3) Make a file for each configuration
(4) Configure as the default configuration
Enter y here, and then customize the name (this is how I did xupeng above)
(5) Delete custom configuration
How to delete if there are too many custom configurations?
Enter the .vuerc file under the C drive user
This is the configuration we just saved: delete'xupeng' and its corresponding value, and it will do.
(6) Project directory created by scaffold 3
run:
npm run serve
4. Configuration file of scaffold 3
(1) Pass vue ui
Enter cmd, enter vue ui, a graphical page will appear
We choose the folder of our own files to import. Then you can modify the relevant configuration:
（2）service.js
(3) Create a new vue.config.js
Create a new vue.config.js with a fixed file name.
Five, arrow function
Arrow function: is also a way to define a function
1. Basic use of arrow functions
const ccc = (parameter list) => ()
2. Arrow function parameters and return values
The parentheses can be omitted for a parameter.
When there is only one line of code, there is no need to return, it will automatically return
3. The use of this in arrow functions
When are arrow functions used more often? A function contains another function, and the contained function is generally written in the form of an arrow function.
Let's look at an example:
Conclusion: This in the arrow function refers to this in the most recent scope .