Nuxt.js搭建一个官网如何简单

林太白2025-08-19 18:04

Nuxt.js官网篇

接下来借助Nuxt.js搭建一个官网部分

1、升级更新

🍎在我刚开始使用的时候我的本地版本^3.17.5更新以后到"nuxt": "^4.0.3",

javascript 复制代码 
^3.17.5

//更新最新版本
yarn nuxt upgrade

//更新到版本4
yarn add nuxt@^4.0.0

执行命令以后看一下自己的配置文件就行了

🍎迁移命令（未使用--手动更新的）

javascript 复制代码 
运行自动化此迁移
npx codemod@latest nuxt/4/file-structure

🍎默认配置更改以后的目录结构

javascript 复制代码 
.output/
.nuxt/
app/
  assets/
  components/
  composables/
  layouts/
  middleware/
  pages/
  plugins/
  utils/
  app.config.ts
  app.vue
  router.options.ts
content/
layers/
modules/
node_modules/
public/
shared/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts

2、全局样式设置

🍎在nuxt.config.ts中自定义全局样式路径

javascript 复制代码 
export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
    '@/assets/css/variables.css',
    '@/assets/css/global.css'
  ]
})

3、图片使用

在Nuxt之中我们可以使用官方给我们提供的NuxtImg模块去完善我们的图片模块部分

🍎安装依赖

javascript 复制代码 
// @nuxt/image 模块

yarn add --dev @nuxt/image

🍎添加模块到 Nuxt 配置

在 nuxt.config.ts 中添加 @nuxt/image 模块

javascript 复制代码 
export default defineNuxtConfig({
  image: {
    provider: 'ipx',
    // 确保允许访问本地图片
    domains: [],
    // SVG 处理配置
    svg: {
      size: 24 // 默认 SVG 尺寸
    },
  },
})

🍎 使用图片

静态图片直接使用我们根目录下面public里面的图片

javascript 复制代码 
<NuxtImg src="/images/preloader.gif" alt="w-20" />

4、line-awesome字体使用

接下来我们在Nuxt.js项目中使用line-awesome字体图标库

🍎方式1：通过CDN引入（最简单）

这里需要注意我们的CDN方式引入的版本不同，对应的icon不同。这也是没办法的事情

javascript 复制代码 
<link rel= "stylesheet" href= "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" >
  
export default defineNuxtConfig({
   app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css'
        }
      ],
    }
   }
})

🍎方式2 本地引入（我选择的方式）

这里我使用的这种方式，需要注意的是引入以后，对应的字体也需要保存

javascript 复制代码 
css: [
  '@/assets/css/lineicons1.3.css',
],

5、完善官网

🍎添加加载效果

javascript 复制代码 
<div v-show="isLoading" class="preloader fixed inset-0 bg-white text-primary flex justify-center items-center z-50">
  <NuxtImg src="/images/preloader.gif" alt="w-20" />
</div>


<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 响应式状态
const isLoading = ref(true)

// 预加载器
onMounted(() => {
  // 模拟预加载器消失
  setTimeout(() => {
    isLoading.value = false
  }, 500)
})
</script>

🍎返回顶部

javascript 复制代码 
<!-- back to top -->
<button id="back-to-top" ref="backToTop" @click="scrollToTop" class="fixed bottom-10 right-5 z-10 h-12 w-12 bg-primary rounded-full flex items-center justify-center text-white transition-all duration-300 invisible">
  <i class="las la-arrow-up"></i>
</button>


const backToTop = ref(null) //返回顶部

// 返回顶部
const scrollToTop = () => {
  if (window.pageYOffset < 50) {
    backToTop.value.classList.add("invisible")
  } else {
    backToTop.value.classList.remove("invisible")
  }
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

🍎添加主题设置面板

主题设置面板能帮助我们设置想要的主题和颜色

javascript 复制代码 
<!-- Theme settings -->
<div ref="settings"  class="fixed top-1/2 -translate-y-1/2 -right-60 z-20 flex gap-4 transition-all duration-300 settings-wrapper" id="settings">
  <button @click="toggleSettings" type="button" id="settings_toggler" class="h-10 w-10 rounded-md text-white shrink-0 bg-primary flex items-center justify-center">
    <i class="las la-cog text-white text-2xl animate-spin" style="animation-duration: 2.5s"></i>
  </button>
  <div class="bg-white rounded-lg p-4 shadow-md w-60 space-y-2">
    <h2 class="text-lg font-semibold text-gray-700">Theme Color</h2>

    <div class="space-y-1">
      <h4 class="text-base font-normal text-gray-500">Primary Color</h4>
      <ul class="flex gap-4">
        <button data-color="79 70 229" class="h-8 w-8 rounded-full bg-[rgb(79,70,229)] block change_prime_color text-white">
          <i class="las la-check invisible"></i>
        </button>
        <li>
          <button data-color="52 152 219" class="h-8 w-8 rounded-full bg-[rgb(52,152,219)] block change_prime_color text-white">
            <i class="las la-check invisible"></i>
          </button>
        </li>
        <li>
          <button data-color="26 188 156" class="h-8 w-8 rounded-full bg-[rgb(26,188,156)] block change_prime_color text-white">
            <i class="las la-check invisible"></i>
          </button>
        </li>
        <li>
          <button data-color="247 159 31" class="h-8 w-8 rounded-full bg-[rgb(247,159,31)] block change_prime_color text-white">
            <i class="las la-check invisible"></i>
          </button>
        </li>
      </ul>
    </div>

    <div class="space-y-1">
      <h4 class="text-base font-normal text-gray-500">Secondary Color</h4>
      <ul class="flex gap-4">
        <li>
          <button data-color="24 24 27" class="h-8 w-8 rounded-full bg-[rgb(24,24,27)] block change_secon_color text-white">
            <i class="las la-check invisible"></i>
          </button>
        </li>
        <li>
          <button data-color="30 41 59" class="h-8 w-8 rounded-full bg-[rgb(30,41,59)] block change_secon_color text-white">
            <i class="las la-check invisible"></i>
          </button>
        </li>
        <li>
          <button data-color="55 65 81" class="h-8 w-8 rounded-full bg-[rgb(55,65,81)] block change_secon_color text-white">
            <i class="las la-check invisible"></i>
          </button>
        </li>
        <li>
          <button data-color="68 64 60" class="h-8 w-8 rounded-full bg-[rgb(68,64,60)] block change_secon_color text-white">
            <i class="las la-check invisible"></i>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- Theme settings end -->

样式写好以后调整一我们的按钮事件

javascript 复制代码 
const settings = ref(null)
// 设置面板切换
const toggleSettings = (e) => {
	e.stopPropagation();
	console.log("toggle",settings.value);
  if (settings.value.classList.contains("right-4")) {
    settings.value.classList.replace("right-4", "-right-60")
  } else {
    settings.value.classList.replace("-right-60", "right-4")
  }
}

现在我们的面板就可以点开了，接下来只需要点击颜色以后更新我们本地存储的颜色即可

javascript 复制代码 
// 颜色主题
const activePrimaryColor= ref(null) // 激活的颜色
const activeSecondaryColor = ref(null) // 激活的颜色


const primaryColors= ref([
	{ name: 'Indigo', value: '79,70,229',numvalue:'79 70 229'},
	{ name: 'Blue', value: '52,152,219',numvalue:'52 152 219'},
	{ name: 'Teal', value: '26,188,156',numvalue:'26 188 156'},
	{ name: 'Orange', value: '247,159,31',numvalue:'247 159 31'}
])
const secondaryColors = ref([
  { name: 'Black', value: '24,24,27', numvalue: '24 24 27' },
  { name: 'Dark Blue', value: '30,41,59', numvalue: '30 41 59' },
  { name: 'Gray', value: '55,65,81', numvalue: '55 65 81' },
  { name: 'Brown', value: '68,64,60', numvalue: '68 64 60' }
])


// 主要颜色切换
const changePrimaryColor = (item) => {
	console.log(item,'changePrimaryColor');

	// 更新活动颜色
  activePrimaryColor.value = item.numvalue;
	
  console.log(activePrimaryColor.value,'activePrimaryColor');

	let lsName="nefte_primary_color";
	root_theme.value.style.setProperty(`--color-primary`,activePrimaryColor.value)
  localStorage.setItem(lsName, activePrimaryColor.value)

	toggleSettings(); // 关闭设置栏
}

// 次要颜色切换
const changeSecondaryColor = (item) => {
  activeSecondaryColor.value = item.numvalue; // 更新活动颜色
	let lsName="nefte_secondary_color";
	root_theme.value.style.setProperty(`--color-secondary`,activeSecondaryColor.value)
  localStorage.setItem(lsName, activeSecondaryColor.value)
	toggleSettings(); // 关闭设置栏
}

// 设置面板切换
const toggleSettings = (e) => {
	// e.stopPropagation();
	// console.log("toggleSettings",settings.value);
  if (settings.value.classList.contains("right-4")) {
    settings.value.classList.replace("right-4", "-right-60")
  } else {
    settings.value.classList.replace("-right-60", "right-4")
  }
}

ok ，尝试一下，我们的颜色切换主题ok

相关推荐
Victor3561 分钟前
Redis（11）如何通过命令行操作Redis？
后端
Victor3562 分钟前
Redis（10）如何连接到Redis服务器？
后端
刺客-Andy17 分钟前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js
前端工作日常32 分钟前
我对eslint的进一步学习
前端·eslint
禁止摆烂_才浅1 小时前
VsCode 概览尺、装订线、代码块高亮设置
前端·visual studio code
程序员猫哥2 小时前
vue跳转页面的几种方法(推荐)
前端
他日若遂凌云志2 小时前
深入剖析 Fantasy 框架的消息设计与序列化机制：协同架构下的高效转换与场景适配
后端
快手技术2 小时前
快手Klear-Reasoner登顶8B模型榜首，GPPO算法双效强化稳定性与探索能力！
后端
代码老y2 小时前
十年回望：Vue 与 React 的设计哲学、演进轨迹与生态博弈
前端·vue.js·react.js
二闹2 小时前
三个注解，到底该用哪一个？别再傻傻分不清了！
后端
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04KGG转MP3工具|非KGM文件|解密音频052025最新国内服务器可用docker源仓库地址大全（2025年8月更新）06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10TRAE Rules 实践：为项目配置 6A 工作流