如何提升你的上网体验 - Naive

准备工作:

一台服务器(Debian系操作系统,要求具有绑定到该服务器的域名,强烈推荐开启443)

常规操作:更新软件源

sudo apt update

sudo apt upgrade

安装Go编译环境

apt-get install software-properties-common

sudo add-apt-repository ppa:longsleep/golang-backports

sudo apt update

sudo apt install golang-go

输入go version若未报错,显示Go版本,则安装Go编译环境成功。

下载编译caddy+naive

go install github.com/caddyserver/xcaddy/cmd/xcaddy@latest

~/go/bin/xcaddy build --with github.com/caddyserver/forwardproxy@caddy2=github.com/klzgrad/forwardproxy@naive

稍等几分钟编译安装完成后,目录下出现caddy文件夹即可。

编写配置文件

在该目录下新建Caddyfile文件

sudo vim Caddyfile

输入

:443, {{你的域名}}
tls {{你的邮箱}}
route {
 forward_proxy {
   basic_auth {{用户名}} {{密码}}
   hide_ip
   hide_via
   probe_resistance
  }
 reverse_proxy  {{伪装站,包括端口}}  {
   header_up  Host  {upstream_hostport}
   header_up  X-Forwarded-Host  {host}
  }
}

更换{{}}内的信息

首次启动

首次启动可运行./caddy run 来观察其运行情况是否正确,同时可以访问域名来测试是否启动成功。

前台运行caddy:./caddy run

后台运行caddy: ./caddy start

停止caddy: ./caddy stop

重载配置: ./caddy reload

### 集成 NuxtJS 和 Naive UI NuxtJS 是一个基于 Vue.js 的框架,用于构建服务端渲染 (SSR) 或静态生成的应用程序。Naive UI 是由 naive-ui 开发团队维护的一个现代化的 Vue 组件库,支持按需加载组件和样式。以下是关于如何将 NuxtJS 与 Naive UI 进行集成的方法。 #### 安装依赖项 首先,在项目中安装 `naive-ui` 及其必要的 peer dependencies: ```bash npm install naive-ui vuejs-datepicker --save ``` 这里需要注意的是,`vuejs-datepicker` 并不是严格意义上的必需品,但它可以作为日期选择器组件的补充[^1]。 #### 创建插件文件 为了使 Naive UI 在整个应用中可用,创建一个新的插件文件来初始化它。在 `plugins/naive-ui.js` 中添加如下代码: ```javascript import { defineNuxtPlugin } from '#app' import naiveui from 'naive-ui' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(naiveui) }) ``` 此脚本通过定义一个 Nuxt 插件并注册到全局 Vue 应用实例上,使得 Naive UI 的功能可以在所有页面和组件中访问[^2]。 #### 修改配置文件 编辑项目的 `nuxt.config.ts` 文件以包含新创建的插件: ```typescript export default defineNuxtConfig({ plugins: [ '~/plugins/naive-ui.js', ], css: ['~/assets/css/main.css'], // 如果有自定义 CSS 则加入此处 }) ``` 上述设置确保了当应用程序启动时会自动加载该插件,并且可以通过调整 `css` 数组来自定义样式的引入方式[^3]。 #### 使用动态导入优化性能(可选) 如果希望进一步减少初始包大小,则考虑采用按需加载的方式而不是一次性全部载入所有的组件。这通常涉及使用工具如 unplugin-vue-components 来自动化处理这一过程: ```bash npm install -D unplugin-vue-components unplugin-auto-import ``` 接着更新 `nuxt.config.ts` 添加以下内容: ```typescript buildModules: [ '@unocss/nuxt', ], modules: [ function () { return { hooks: { 'build:before': async () => { await require('unplugin-vue-components/webpack')(), await require('unplugin-auto-import/webpack')() } }, }; }, ] ``` 这样做的好处是可以显著降低打包后的体积,因为只有实际使用的部分会被编译进入最终产物之中[^4]。 #### 测试环境验证 完成以上步骤之后,请运行开发服务器测试一切是否正常工作: ```bash npm run dev ``` 此时应该能够在任何地方正常使用 Naive UI 提供的各种控件而无需额外声明它们的存在状态。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Anyexyz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值