1. Getting to know vue for the first time
Article Directory
1 Create by downloading vue.js to the local
- Put the downloaded vue source code in the project
- Introduce vue
- Declare the DOM area to be controlled by vue
- Create a vue configuration object
- Create data in configuration object
- Create an application, pass in the configuration object, and mount the DOM area to be operated
- Operate in the DOM area
<!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>
<!-- 1. 引入vue -->
<script src="./Vue3.js"></script>
</head>
<body>
<div id="counter">
<!-- 双大括号是告诉程序里面是一个变量 -->
<p>{
{num}}</p>
</div>
<script>
const Counter = {
//配置对象
data: function () {
return {
num: 0,
}
}
}
// 创建一个应用，将配置对象传进去 Vue.createApp(Counter)
// 将要操作的DOM区域进行了挂载 .mount('#counter')
Vue.createApp(Counter).mount('#counter')
</script>
</body>
</html>
operation result
2 Install the vue debugging tool vue-devtools
- open google store
- search vue
- Choose the beta version, the beta version is the Vue3 debugging tool, and the other is the Vue2 debugging tool, which cannot be mixed
- Set up the debugging tool
3 Use vite to install vue
The premise is that you need to install Node
1. npm init vite@latest 项目名字 -- --template vue
// 可能会出现下面的对话，直接回复y即可
Need to install the following packages:
create-vite@3.2.1
Ok to proceed? (y)
2. cd 项目名称
3. npm install
4. npm run dev
Enter the URL to enter the interface
project structure
- node_modules is a dependency of the project
- public is a static resource folder
- src is the source code
- main.js is the entry file