[vue3入门]HTML Learn Data Day 7

学习真的是一件很累的事情，更何况有这么多杂七杂八的事情
唉唉，莎了我吧
原文章地址：https://www.cnblogs.com/Reisentyan/p/19656869
Vue3 构建

Vue3 每一次构建新项目时，都会从 npm 上拉取模板。
在 VS Code 中按：

1. CTRL + ~

复制代码

打开终端，然后输入：

1. 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。
里面有一行关键代码：

1. [/code]这句话非常重要。
2. 意思是：
3. [indent]浏览器加载 main.ts 作为整个应用的入口模块。
4. [/indent]也就是说：
5. 真正的程序逻辑从 main.ts 开始。
6. [size=5]关于一些基础知识[/size]
8. 在main.ts中我们会看到一些代码，我将代码及注释放到这里：
9. [code]import { createApp } from 'vue'
10. // 从 vue 模块中拿出 createApp 这个命名导出
12. import './style.css'
13. // 引入全局样式
15. import App from './App.vue'
16. // 从 App.vue 中拿出默认导出的组件
18. createApp(App).mount('#app')
19. // 创建一个 Vue 应用实例
20. // 并把它挂载到 index.html 里的 #app 上

复制代码

也就是说，从 app.vue 中拿东西出来，插到 index.html 中的#app这个组件上面
从app.vue中我们会看到三段代码：

1. [/code]<ul>                        [size=6]This Is My Homepage[/size]
3.                 这就是信息页       

复制代码

App.vue

1. <template>
2.         <PersonPage />
3. </template>

复制代码

• import 是把组件模块引入
  
• 是使用组件
  
• 在 <script setup> 中 import 后可以直接使用，不需要额外注册
  

index.html

1.                                                                         vue                        <template>
2.         <PersonPage />
3. </template>                       

复制代码

这里的 #app 只是一个挂载容器。
真正的页面结构全部来自 Vue。
总结

Vue3 的工作流程就是：

• 写小积木（Components）。
  
• 在大积木里组装小积木（App.vue）。
  
• 通过 main.ts 把大积木挂到 index.html。
  

像这样拼积木，一份项目就拼出来了

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！