初学vue，模仿个静态网站

已于 2022-07-31 16:44:07 修改
阅读量778 收藏 7
点赞数 1
分类专栏： 前端 文章标签： npm vue.js 前端
于 2022-07-31 11:32:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45833112/article/details/126083478
版权

初学vue，模仿个静态网站

使用 vue.js + element UI 编写的一个静态网站，后期会加入更多的元素进去。

项目安装

npm install

编译运行

npm run serve

全局安装vercel

npm i -g vercel

部署到 vercel

vercel --prod

部署到vercel 需要到vercel 官网认证邮箱

效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

地址

网站

chafan_website (chafan-website.vercel.app)

GitHub 仓库

ChaFano/chafan_website (github.com)

资源来源

登录界面来自于CodePen

https://codepen.io

Bing图片来自 开放接口自动获取的

java获取Bing壁纸_茶凡_Matrix的博客-CSDN博客

茶凡_Matrix
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个用vue写的小网站 过程梳理 一些记录
xidongdong1的博客
11-29 8302
先看实现后的效果： 点击立即购买： 确认购买： 支付成功后跳转到订单列表页面： 项目目录 把导航和底部的内容layout.vue作为跟组件 先完成导航部分的制作，包括登录弹窗的显示，其中涉及到的有layout、dialog、logForm.vue //layout.vue class="app-head">
【Vue】模仿b站网站-----使用vue实现
coding加油站
08-17 2863
vue作业，vue模仿b站，b站，b站网页设计
vue前端一个简单的静态页面
最新发布
2303_76992412的博客
05-27 2551
Vue.js是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue的设计注重灵活性和“可以被逐步集成”的特点，可以用于构建简单的静态页面到复杂的单页应用程序。Vue的核心功能包括声明式渲染和响应性，它能够自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。此外，Vue支持单文件组件，允许开发者将组件的逻辑、模板和样式封装在同一个文件中，便于管理和复用。
【开发日记1】用Vue实现仿New Bing网页
weixin_44307002的博客
05-26 697
NewBing的AI问答界面真的非常好看，重点突出一个简约大气，刚好最近在学Vue，模仿一个网页试试水~
VUE仿知乎网站(二)-首页header开发
weixin_44208883的博客
08-04 1241
<template> <header class="main-header">header</header> </template> <template> <div class="home"> <MainHeader></MainHeader> <router-view></router-view> </div> </template> <script.
用vue做一个静态网页包含注册登陆首页详情页（仅用于学习参考）
m0_68913934的博客
05-14 1761
组件设置为Vue实例的模板，这样就可以根据当前URL的不同，自动渲染对应的组件了。最后，需要将各个组件、路由和Vue实例导出，在浏览器中打开。在Vue实例中，我们将。
Vue制作静态页面--day01
m0_66711291的博客
04-22 1万+
希望能放置处游戏PHigros的界面，没有任何有用的功能，只是熟悉下vue中的一些语法。 1、脚手架创建项目 使用脚手架3.0创建项目 执行指令 vue create pgr 配置 babel，vuex，vue-router 然后删除掉多余的文件 2、vue文件快速生成 创建好vue文件后在文件内输入vue可以快速生成vue文件的框架 （之前都是手敲，后悔刚知道） 3、css文件的引入 在app.vue这个文件的css部分可以引入css文件作为全局样式 这里先引入两个——初始..
搭建模仿跨境电商网站vue-router路由跳转
10-11
在这个项目中，我们将学习如何使用 vue-router 来构建一个模仿跨境电商网站的简单应用。 首先，我们需要了解 vue-router 的基本概念。Vue Router 提供了名为`router`的对象，通过它可以定义页面间的路径和对应的...
仿京东到家H5前端vue源码.zip
04-24
【标题】"仿京东到家H5前端vue源码.zip"揭示了这是一个使用Vue.js框架构建的、模仿京东到家H5页面的前端项目。Vue.js是目前非常流行的一个JavaScript库，尤其适合构建用户界面。它以其轻量级、易上手、组件化开发的...
仿腾讯会议编写的静态页面
07-13
【描述】提到的是这个静态页面模仿了腾讯会议的移动端界面，并实现了基础的跳转功能。这意味着该页面可能包含了多个模拟会议功能的页面，如登录、会议室、设置等，用户可以通过点击链接或按钮在这些页面间切换。使用...
仿kugou的vuedemo
08-12
【标题】"仿kugou的vuedemo"是一个基于Vue.js框架的项目，旨在模仿知名音乐播放平台酷狗的用户界面和功能。这个项目展示了如何利用Vue.js进行前端开发，构建一个具有实际应用场景的Web应用。 【描述】提到，这个...
使用Vue.js构建静态网站的简约框架.zip
09-24
使用Vue.js构建静态网站的简约框架。.zip,()==[:> A static website generator for building blazing fast websites with Vue.js
vuejs20仿写饿了么webapp
08-12
在学习vue的时候写的一个小demo，通过多写项目提高对vue框架的深入了解
Peco是一个基于webpack和Vuejs的静态网站生成器
08-10
Peco是一个静态网站生成器，由现代web工具提供支持，如webpack和Vue.js. 它在构建时生成静态HTML文件和资产，一旦生成的网站在客户端加载，它就像SPA一样运行。
supermail-master_vue_
10-03
本项目"supermail-master_vue_"便是基于Vue.js技术栈，模仿知名电商平台蘑菇街，实现了一个网上商城的前端部分。通过这个项目，我们可以深入学习和理解Vue.js的核心特性和相关开发技巧。 一、Vue.js 概述 Vue.js ...
Vue制作静态页面--Day03
m0_66711291的博客
05-14 3178
希望仿制出游戏PHigros的页面，没有任何功能，只是联系vue语法用 期末考试直接摆烂，能过就行好吧 一、成果展示 当然只是做出样子了，很多地方和自己想的还不一样 二、布局 整体采用flex布局加position定位 单位采用vh和vw 做这个页面最大的收获就是感觉布局上的熟练度增加了 三、滚动容器 点击三个点后会在右侧展开一个容器，选择背景图，超出容器的可以滚动出来。 使用样式overflow：scroll来实现 本来这个东西想封装成一个组件，但是失败了.
Vue编写静态页面框架的基本步骤（实现基本的页面链接跳转）
m0_46093203的博客
06-30 5586
第一步：定义一个整体的框架（即主页面：可以到element-ui官网-组件-container中找自己满意的） 第二步：将官网的框架拷贝到开发软件中 <template> <div> <el-container> <el-header>header</el-header> <el-container> <el-aside wi
使用vue组件搭建网页应用
热门推荐
Cliff Rhine的博客
03-23 1万+
使用vue组件搭建网页应用
vue3仿网易云界面
Mo_olly的博客
08-05 2211
vue3实现仿网易云界面
vue打包一个静态网站
05-02
Vue.js 是一款流行的 JavaScript 框架，可以用于构建高性能的交互式 Web 界面。在 Vue.js 中，可以使用 Vue CLI 工具来快速构建和打包项目。下面是一些步骤，介绍如何使用 Vue CLI 打包一个静态网站： 1. 首先，需要安装 Node.js 和 Vue CLI 工具。安装 Node.js 可以到官网下载安装包并安装，安装 Vue CLI 可以使用 npm 或者 yarn 安装。命令如下： ``` npm install -g @vue/cli ``` 或者 ``` yarn global add @vue/cli ``` 2. 安装完成后，使用以下命令创建一个新的 Vue 项目： ``` vue create my-project ``` 其中，my-project 是项目名称，可以根据自己的需求来修改。 3. 创建完成后，进入项目目录，使用以下命令进行打包： ``` npm run build ``` 或者 ``` yarn build ``` 4. 打包完成后，在项目目录下会生成一个 dist 文件夹，其中包含了打包后的静态文件。将该文件夹中的文件上传到服务器或者发布到其他平台即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值