seo整站优化公司,模板之家中文版,网站建设与管理卷子,银川seo优化「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度#xff0c;分享学习笔记#xff0c;希望能对大家有所帮助。 目录 0 课程介绍 1 Vue3 简介 2 创建 Vue3 工程 2.1 基于 vue-cli 创建 2.2 基于 vite 创建#xff08;推荐#xff09; 2.3 … 「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度分享学习笔记希望能对大家有所帮助。 目录 0 课程介绍 1 Vue3 简介 2 创建 Vue3 工程 2.1 基于 vue-cli 创建 2.2 基于 vite 创建推荐 2.3 一个简单的效果 0 课程介绍 P1https://www.bilibili.com/video/BV1Za4y1r7KE?p1 1 Vue3 简介 P2https://www.bilibili.com/video/BV1Za4y1r7KE?p2 Vue 是一个用于 构建用户界面 的 渐进式 框架 官方文档 https://cn.vuejs.org/ 2 创建 Vue3 工程 2.1 基于 vue-cli 创建 P3https://www.bilibili.com/video/BV1Za4y1r7KE?p3 2.2 基于 vite 创建推荐 vite 是新一代前端构建工具官网地址https://vitejs.cn 具体操作如下 ## 1.创建命令npm create vuelatest## 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组件: P4https://www.bilibili.com/video/BV1Za4y1r7KE?p4 template div classapp h1你好啊/h1 /div/templatescript langts export default { name:App //组件名 }/scriptstyle .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; }/style 安装官方推荐的vscode插件 2.3 一个简单的效果 P5https://www.bilibili.com/video/BV1Za4y1r7KE?p5 Vue3向下兼容Vue2语法且Vue3中的模板中可以没有根标签 template div classperson h2姓名{{name}}/h2 h2年龄{{age}}/h2 button clickchangeName修改名字/button button clickchangeAge年龄1/button button clickshowTel点我查看联系方式/button /div/templatescript langts 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 「结束」 本文由 mdnice 多平台发布
