经过一段时间的开发测试，在框架上Nuxt比较适合，在UI上，NaiveUI不错，在CSS上，Unocss就可以。这三者结合起来，可以组成前端开发的三件套。Nuxt有一种模块的机制，可以很方便地拓展它的功能。在前端方面主要是UI 和 CSS，我也选了两个比较适合的。
Nuxt安装
"nuxt": "^3.4.3" nodejs: v18.16.0
1. npx nuxi init nuxt-app
运行可能会出错，解决：
首先要打开小梯子，然后在CMD中输入：
set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080
也可以直接到github下载模板， https://github.com/nuxt/starter/tree/v3
更改配置： package.json devDependencies -> dependencies
2. cnpm install --global yarn //yarn --version 1.22.19
yarn install
3. yarn dev -o
//安装 vs code插件
Volar --vs code //vue插件,代码高亮
Naive Ui Snippets //代码提示
UnoCSS //代码提示
naive UI
1. yarn add @huntersofbook/naive-ui-nuxt //^0.7.1
2. 配置，nuxt.config.ts：
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: ["@huntersofbook/naive-ui-nuxt"],
});
3. <n-button type="primary">
Primary
</n-button>
Unocss安装
这是一个按需原子化 CSS 引擎，比起直接使用 TailwindCSS 更轻更快！
它的预设样式可以直接使用 TailwindCSS 和 Windicss 的样式。
yarn add @unocss/nuxt //^0.51.12
//配置模块，nuxt.config.ts：
modules: [
'@unocss/nuxt',
],
// 根目录创建 uno.config.ts
import {
defineConfig, presetAttributify, presetIcons,
presetTypography, presetUno, presetWebFonts,
transformerDirectives, transformerVariantGroup
} from 'unocss'
export default defineConfig({
rules: [
//...
],
shortcuts: [
// ...
],
theme: {
colors: {
// ...
}
},
presets: [
presetUno(), //工具类预设
presetAttributify(), //属性化模式支持
presetIcons(), //icon支持
presetTypography(),
presetWebFonts({
fonts: {
// ...
},
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
})
三者安装好后，yarn dev跑起来试试，能正常打开页面即OK!