Basic understanding of Vue-cli application and components of Vue2
- 1. Vue-cli
-
- 1. Single Page Application
- 2. Introduction to vue-cli
- 3. Installation and use
- 4. Create a project
-
- 4.1 Input to create a project
- 4.2 Select the third item, perform self-configuration, and press Enter
- 4.3 Choose the library you need
- 4.4 Select the version of Vue
- 4.5 Selecting CSS selectors
- 4.6 Select the storage method of configuration files such as Babel, ESLint, etc.
- 4.7 Save all the selections you have made, and these selections will be automatically defaulted next time you create a project without re-checking.
- 4.8 Write the project name
- 4.9 Results after running
- 4.10 Start the service
- 5. Interpretation of project catalog
- 6. The running process of the vue project
- 7. $mount() method
- 2. Simple application of Vue components
1. Vue-cli
1. Single Page Application
Single-page application (SPA) refers to a web site with only one HTML page, and all functions and interactions are completed in this one and only page.
2. Introduction to vue-cli
Vue-cli is a standard tool for Vue.js development, which simplifies the process for programmers to create engineered Vue projects based on webpack.
Chinese official website : https://cli.vuejs.org/zh/
3. Installation and use
Vue-cli is a global package on npm, which can be easily installed on your computer by using the npm install command.
npm install -g @vue/cli
After the installation is successful
, enter the command to check whether it is normal
vue -V
If so, it means success
4. Create a project
4.1 Input to create a project
vue create 自定义的项目名
4.2 Select the third item, perform self-configuration, and press Enter
4.3 Choose the library you need
Press the space bar to select or deselect
4.4 Select the version of Vue
Choose according to your needs
4.5 Selecting CSS selectors
Choose according to your needs
4.6 Select the storage method of configuration files such as Babel, ESLint, etc.
The first item is archived to a separate file and
the second item is stored in package.json.
The first one is selected by default.
4.7 Save all the selections you have made, and these selections will be automatically defaulted next time you create a project without re-checking.
If you enter y, the selection is saved. If you enter N, the selection will not be saved, and you will have to check it again next time.
4.8 Write the project name
4.9 Results after running
It is successful as shown below
4.10 Start the service
First enter the directory of the created project
cd 项目名
restart the service
npm run serve
at last
Copy the address to the browser and
the result is as shown in the figure below, indicating that the service is started successfully
5. Interpretation of project catalog
5.1 node_modules directory
Store all third-party packages
5.2 public directory
(1)
The icon of the favicon.ico website
(2)
The file generated by index.html will be injected into it
5.3 src directory
The source code directory of the project, all the codes are in the src directory
(1) The assets folder
stores the static resource files used in the project, such as: css style sheets, image resources.
(2) The components folder
stores encapsulated and reusable components
(3) The main.js file
is the entry file of the project. To run the entire project, main.js must be executed first
(4) App.vue file
The root component of the project
5.4 .gitignore file
git related configuration
5.5 babel.config.js file
babel configuration file
5.6 package.json file
Package management configuration file
6. The running process of the vue project
(1) App.vue is used to write the template structure to be rendered
(2) An el area needs to be reserved in index.html
(3) main.js renders App.vue to the area reserved by Index.html
7. $mount() method
7.1 Introduction
The $mount() method of the Vue instance has exactly the same function as the el attribute.
7.2 Related codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<div id="app">
{
{username}}
</div>
<!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
<script src="./lib/vue-2.6.14.js"></script>
<!--2.创建Vue的实例对象-->
<script>
// 创建Vue的实例对象
// 相当于 ViewModel层
const vm = new Vue({
// data对象就是要渲染到页面上的数据
// 相当于 model层
data: {
username: 'admin'
},
})
vm.$mount('#app')
</script>
</body>
</html>
2. Simple application of Vue components
1. Component development
Component-based development refers to: according to the idea of encapsulation, the reusable UI structure on the page is encapsulated into components, so as to facilitate the development and maintenance of the project.
2. Component development in vue
(1) Vue is a front-end framework that supports component-based development.
(2) Vue stipulates that the suffix of the component is .vue. That is to say, the App.vue file is essentially a vue component.
3. The three components of the vue component
3.1 template
Component template structure
3.2 script
Component JavaScript Behavior
3.3 style
component style
4. The use of vue components
4.1 Introduction
The main code is written under the template tag, the JavaScript code is written under the script tag, and must also have export default, and the CSS code is written under the style tag, which must also have lang="less".
4.2 code
<template>
<div>
<div class="text-box">
<h3>自定义的属性 {
{ username }}</h3>
<button @click="changeName">修改用户名</button>
</div>
</div>
</template>
<script>
// 默认导出，这是固定写法
export default {
// data 数据源
// 注意：.vue组件中的data不能像之前一样，不能指向对象
// 注意：组件中的data必须是一个函数
data(){
// 这个return出去的{}中，可以定义数据
return {
username: 'admin'
}
},
methods: {
changeName(){
console.log(this.username)
// 在组件中，this就表示当前组件的实例对象
this.username = '张三'
}
},
// 当前组件中的侦听器
watch:{
},
// 当前组件中的计算属性
computed:{
},
// 当前组件中的过滤器
filters:{
},
};
</script>
// CSS渲染
<style lang="less">
.text-box{
background-color: aqua;
h3{
color: red;
}
}
</style>
4.3 Results
