【Vue3】1.1 使用NaiveUI 构建页面_n-button

写在前面

网上关于VUE3的教程 包括VUE官网 和 Naive UI的官网 的而一些例子，用的都是普通的<script>标签的形式，而我们实际的开发工作中，基本都是用 Vite 或者是 VUE CLI 来构建项目，从这些工具中创建出来的项目都是单页应用的形式，官网的说法是SFC。这个小门槛导致我看教程到下手写代码经历了一点点小坎坷。只要理顺了这一点，就可以推进后续的学习了。

普通的Script标签 和 Script setup标签的区别

VUE3的其中一个大变化是加入了 Script setup这个语法糖，从HTML5的角度来讲 就是为Script标签增加了一个自定义的属性，从VUE的角度来讲，就是通过寻找这个script里的setup属性完成了一写自动的装配工作。我没有去看源码，实际逻辑是否如此不得而知，但是这么理解可以快速的开始接下来的学习。

使用n-button标签创建一个naive-ui的按钮

1. 首先打开 vite 创建出来的 App.vue 文件

这里有个知识点，一个vue文件，就是一个vue组件，也就是一个SFC。
每个vue文件中可以包含三部分内容 Script 脚本部分 Template 页面部分 style 样式部分

2. 在<Script setup>标签下面加入一行代码

import