写在后面
本文为尚硅谷禹神 Vue3 教程的学习笔记。本着本人学习、分享别人的态度，分享学习笔记，心愿能对大家有所帮忙。
::: block-1
目录
- 0 课程介绍
- 1 Vue3 简介
2 创立 Vue3 工程
- 2.1 基于 vue-cli 创立
- 2.2 基于 vite 创立（举荐）
- 2.3 一个简略的成果
:::
0 课程介绍
P1：https://www.bilibili.com/video/BV1Za4y1r7KE?p=1
1 Vue3 简介
P2：https://www.bilibili.com/video/BV1Za4y1r7KE?p=2
Vue 是一个用于 构建用户界面 的 渐进式 框架
官网文档：
https://cn.vuejs.org/
2 创立 Vue3 工程
2.1 基于 vue-cli 创立
P3：https://www.bilibili.com/video/BV1Za4y1r7KE?p=3
2.2 基于 vite 创立（举荐）
vite 是新一代前端构建工具，官网地址：https://vitejs.cn
具体操作如下：
## 1.创立命令npm create vue@latest## 2.具体配置## 配置项目名称√ Project name: vue3_test## 是否增加TypeScript反对√ Add TypeScript? Yes## 是否增加JSX反对√ Add JSX Support? No## 是否增加路由环境√ Add Vue Router for Single Page Application development? No## 是否增加pinia环境√ Add Pinia for state management? No## 是否增加单元测试√ Add Vitest for Unit Testing? No## 是否增加端到端测试计划√ Add an End-to-End Testing Solution? » No## 是否增加ESLint语法查看√ Add ESLint for code quality? Yes## 是否增加Prettiert代码格式化√ Add Prettier for code formatting? No本人入手编写一个App组件:
P4：https://www.bilibili.com/video/BV1Za4y1r7KE?p=4
<template> <div class="app"> <h1>你好啊！</h1> </div></template><script lang="ts"> export default { name:'App' //组件名 }</script><style> .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; }</style>装置官网举荐的vscode插件：
2.3 一个简略的成果
P5：https://www.bilibili.com/video/BV1Za4y1r7KE?p=5
Vue3向下兼容Vue2语法，且Vue3中的模板中能够没有根标签
<template> <div class="person"> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button @click="changeName">批改名字</button> <button @click="changeAge">年龄+1</button> <button @click="showTel">点我查看联系方式</button> </div></template><script lang="ts"> export default { name:'App', data() { return { name:'张三', age:18, tel:'13888888888' } }, methods:{ changeName(){ this.name = 'zhang-san' }, changeAge(){ this.age += 1 }, showTel(){ alert(this.tel) } }, }</script><center>完结</center>
本文由mdnice多平台公布