【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡 - 教程

【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

引言

我们有个产品需要个很漂亮的落地页，网上找了一圈想买个好看的落地页都买不到，于是乎卓伊凡决定做一个非常漂亮的落地页，记录过程给大家。

开源仓库：

https://gitee.com/youyacao/xiaoquanzi-down

实战内容

第一步肯定是建立仓库

clone 下来后开始建立首页，这是一个基于优雅草私鱼创作系统的一款知识付费创作系统

小圈子 - 创作者专属平台 | 内容创作变现、粉丝互动、原创支持

标题关键词我们先做好，这样我们开始建立vue，我们需要以橙色风格来做这件事。

首先中断运行

npm create vite@latest . — —template vue

建立vue模板，

提示文档里面有内容，但是没有其实，所以我们选择

Remove existing files and continue

选择框架选择 vue

◆ Use rolldown-vite (Experimental)?:
│ ○ Yes
│ ● No

这个提示是 Vue.js 项目创建工具 在询问你是否要使用一个名为 rolldown-vite 的实验性打包工具。

详细解释：

什么是 rolldown-vite？

rolldown 是一个用 Rust 编写的新一代 JavaScript 打包工具
由 Vue 和 Vite 团队 开发，旨在成为未来 Webpack 和 Rollup 的替代品
目前处于 实验阶段 (Experimental)
基于 Vite 构建，性能比传统工具更快

选项含义：

○ Yes - 选择使用 rolldown-vite（实验性版本）
● No - 选择不使用，继续使用稳定的 Vite 默认配置

建议选择：

对于大多数用户，推荐选择：

● No （不使用）

为什么选择 No？

稳定性：rolldown 还在实验阶段，可能存在未知问题
生产环境：不建议在生产项目中使用实验性工具
兼容性：某些插件可能还不完全支持

什么时候可以选择 Yes？

你想体验最新技术
用于测试或学习项目
愿意承担可能遇到问题的风险

创建命令示例：

# 使用稳定版本（推荐）
npm create vue@latest
# 然后选择 "No" for rolldown-vite
# 或者直接跳过选择
npm create vue@latest -- --yes

选择 No 会让你继续使用经过充分测试的 Vite + Rollup 组合，这是目前最稳定可靠的选择。

这里提示我们选择yes

因为我们不怕使用新技术，毕竟这个只是个落地页，在2025年需要使用新技术

一顿输出完了以后初始框架建立好了

执行npm install 安装依赖，再执行 npm install vue-router@4 axios 安装

然后开始写代码，首页代码初步开发如下：

index.html代码如下




  
    
    
    
    小圈子 - 创作者专属平台 | 内容创作变现、粉丝互动、原创支持
    
    
  
  
    
    <script type="module" src="/src/main.ts"></script>

vue 代码如下， app.vue


<script setup lang="ts">
import { ref } from 'vue';
const activeFaq = ref(-1);
const toggleFaq = (index: number) => {
  activeFaq.value = activeFaq.value === index ? -1 : index;
};
const faqs = [
  {
    question: '小圈子适合哪些类型的创作者？',
    answer: '小圈子适合各类内容创作者，包括但不限于：文章作者、插画师、摄影师、设计师、音乐人、教育工作者、程序员、心理咨询师等。只要你有专业知识或创意内容想要分享并变现，都可以加入小圈子。'
  },
  {
    question: '如何在小圈子上获得收入？',
    answer: '小圈子提供多种变现方式：1) 出售在线课程；2) 设置会员订阅；3) 销售数字作品(如电子书、插画、音乐等)；4) 提供咨询服务；5) 接收粉丝打赏。创作者可以根据自己的内容类型和粉丝需求选择最适合的变现方式。'
  },
  {
    question: '小圈子收取多少佣金？',
    answer: '小圈子采用阶梯式佣金模式：新创作者前3个月佣金为10%，之后根据创作者等级和收入规模，佣金比例在10%-20%之间浮动。我们致力于为创作者提供更公平的收入分配，让创作者获得更多收益。'
  },
  {
    question: '如何吸引粉丝加入我的圈子？',
    answer: '小圈子提供多种粉丝运营工具：1) 内容预览功能，让潜在粉丝了解你的内容价值；2) 会员专属社群，增强粉丝黏性；3) 定期活动和直播，促进互动；4) 数据分析工具，帮助你了解粉丝需求，优化内容策略。'
  },
  {
    question: '小圈子如何保护创作者的知识产权？',
    answer: '小圈子高度重视知识产权保护：1) 所有内容采用数字水印技术；2) 严格的内容访问控制机制；3) 支持DMCA投诉；4) 提供版权登记指引；5) 对侵权行为零容忍，发现即严肃处理。'
  }
];
</script>

ok

目前这个版本看看效果然后提交

我们执行npm run dev

初步样子有了我先提交gitee，下一篇继续完善

发表于 2025-11-08 14:37 jzssuanfa 阅读(40) 评论(0) 收藏举报

刷新页面返回顶部

【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡 - 教程