[vue3入门]HTML Learn Data

Vue3 构建Vue3 每一次构建新项目时都会从 npm 上拉取模板。在 VS Code 中按CTRL ~打开终端然后输入npm create vitelatest vue -- --template vue-ts解释一下这条命令create vitelatest使用最新版本的 Vite 创建项目vue项目文件夹名--template vue-ts使用 Vue TypeScript 模板中途会问是否使用实验性功能 → 选择NO是否下载并运行 → 选择YES然后它会自动在当前文件夹生成一个完整的 Vue3 项目。每次启动项目都在项目根目录输入命令npm run dev启动本地开发服务器项目入口结构生成后项目默认打开的是index.html。里面有一行关键代码script typemodule src/src/main.ts/script这句话非常重要。意思是浏览器加载 main.ts 作为整个应用的入口模块。也就是说真正的程序逻辑从main.ts开始。关于一些基础知识在main.ts中我们会看到一些代码我将代码及注释放到这里import { createApp } from vue // 从 vue 模块中拿出 createApp 这个命名导出 import ./style.css // 引入全局样式 import App from ./App.vue // 从 App.vue 中拿出默认导出的组件 createApp(App).mount(#app) // 创建一个 Vue 应用实例 // 并把它挂载到 index.html 里的 #app 上也就是说从 app.vue 中拿东西出来插到 index.html 中的#app这个组件上面从app.vue中我们会看到三段代码script setup langts /script template /template style scoped /stylescript setup逻辑template结构HTMLstyle scoped样式在 Vue3 中使用script setup是推荐写法它是 Composition API 的语法糖。style加上scoped后这里的样式只对当前组件生效不会跑到外面去乱窜防止样式污染。样例script setup langts defineOptions({ name: App }); /script template div classtitle h1这是一个标题/h1 /div /template style scoped .title { background-color: pink; box-shadow: 0 0 10px; padding: 20px; border-radius: 10px; } /style一个.vue文件在编译后本质上会变成一个 JS 模块模块对外输出一个值——通常就是“组件对象”。也就是说做网站就像拼积木一样每一个 Vue 文件都是一块积木最后拼好之后Vue 会把整棵组件树插入到 HTML 里的那个#app容器里。以下是一段简单的代码在网页中显示了一块信息页一份简单的样例这是我的部分文件树D: index.html src │ App.vue │ main.ts │ style.css │ ├─assets │ vue.svg │ └─components IsMe.vue我将 IsMe.vue 拼图插入到 App.vue 中IsMe.vue:script setup langts defineOptions({ name: personPage }); /script template div classbackground h1This Is My Homepage/h1 div classinf这就是信息页/div /div /template style scoped .background { background-color: pink; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } .background h1 { text-align: left; } .inf { box-shadow: 0 0 5px; color: purple; font-size: 50px; border-radius: 20px; } /styleApp.vuescript setup langts import PersonPage from ./components/IsMe.vue; /script template PersonPage / !--在这里插入IsMe.vue组件-- /template style scoped/styleimport是把组件模块引入PersonPage /是使用组件在script setup中 import 后可以直接使用不需要额外注册index.html!doctype html html langen head meta charsetUTF-8 / link relicon typeimage/svgxml href/vite.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titlevue/title /head body div idapp/div !--在这里插入App.vue组件-- script typemodule src/src/main.ts/script /body /html