[vue3入门]HTML Learn Data Day 7
学习真的是一件很累的事情，更何况有这么多杂七杂八的事情唉唉，莎了我吧
原文章地址：https://www.cnblogs.com/Reisentyan/p/19656869
Vue3 构建
Vue3 每一次构建新项目时，都会从 npm 上拉取模板。
在 VS Code 中按：
CTRL + ~打开终端，然后输入：
npm create vite@latest vue -- --template vue-ts解释一下这条命令：
[*]create vite@latest：使用最新版本的 Vite 创建项目
[*]vue：项目文件夹名
[*]--template vue-ts：使用 Vue + TypeScript 模板
中途会问：
[*]是否使用实验性功能 → 选择 NO
[*]是否下载并运行 → 选择 YES
然后它会自动在当前文件夹生成一个完整的 Vue3 项目。
每次启动项目，都在项目根目录输入命令：npm run dev 启动本地开发服务器
项目入口结构
生成后，项目默认打开的是 index.html。
里面有一行关键代码：
这句话非常重要。
意思是：
浏览器加载 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中我们会看到三段代码：
<ul> This Is My Homepage
这就是信息页 App.vue
<template>
<PersonPage />
</template>
[*]import 是把组件模块引入
[*] 是使用组件
[*]在 <script setup> 中 import 后可以直接使用，不需要额外注册
index.html
vue <template>
<PersonPage />
</template> 这里的 #app 只是一个挂载容器。
真正的页面结构全部来自 Vue。
总结
Vue3 的工作流程就是：
[*]写小积木（Components）。
[*]在大积木里组装小积木（App.vue）。
[*]通过 main.ts 把大积木挂到 index.html。
像这样拼积木，一份项目就拼出来了
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 这个好，看起来很实用 yyds。多谢分享 收藏一下 不知道什么时候能用到 前排留名，哈哈哈 很好很强大我过来先占个楼 待编辑 鼓励转贴优秀软件安全工具和文档！ 东西不错很实用谢谢分享
页:
[1]