博客

写在前面

网上关于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 {NButton} from 'naive-ui'

通过上边的代码，就可以将naive-ui的 按钮组件引入到SFC

通过 Script 中的 setup ，Vue3 就能将这个组件自动绑定到页面里

3. 在页面加入

n-button

标签

在template标签内部随便找地方添加以下代码

<n-button>Naive-ui Button</n-button>

就可以完成按钮的注入了，就是这么简单

完成

如果项目已经使用

npm run dev

命令启动起来了，那么此时，用浏览器打开页面，就能看到一个装修过的按钮了。