VUE3初识
ShuyiSteve
[up主专用，视频内嵌代码贴在这]
VUE3初识
今天聊一聊最近学到的东西 主要是vue3特别基础的内容 今天会以vue2的语法了解一下主要的功能
VUE3提供了新的创建项目方式 vue-vite
这是一个最新的前端构造工具
优势在于可以按需编译，所以它对于轻量快速的热重载能实行极速的服务启动
具体方式如下：
在终端输入后会弹出提示框
1
2
3
4
5
6
7
8
9
10
11
12
13
| ✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
|
都选Yes就可以
之后就可以用自己的IDE打开项目文件夹
然后在ide里面的终端输入以下命令来安装依赖：
[Screenshot 2025-07-24 at 01.01.37.png]
然后会看到这一坨文件
用vue-vite创建的项目的入口文件是index.html
打开我们的src文件夹
[Screenshot 2025-07-24 at 01.13.11.png]
1
2
3
4
|
import { createApp } from 'vue'
import App from './App.vue
createApp(App).mount('#app')
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<personCard/>
</template>
<script lang="ts">
import personCard from './components/personCard.vue'
export default {
name:'App',
components: { personCard }
}
</script>
<style>
</style>
|
在components文件夹里面有一个我们自己写的组件 personCard.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <template>
<div class="person">
<h2>姓名: {{ name }}</h2>
<h2>年龄: {{ age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: 'personCard',
data() {
name:'张三'
age:'18'
tel:'18888888888'
},
method() {
changeName() {
this.name = 'zhang-san'
},
changeAge() {
this.age += 1
},
showTel() {
alert(this.tel)
}
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10%;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
|
感谢尚硅谷
