初学vue，模仿个静态网站

原创 已于 2022-07-31 16:44:07 修改 · 928 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm #vue.js #前端

于 2022-07-31 11:32:06 首次发布
初学者教程：利用vue.js和elementUI创建静态网站，并介绍如何部署到vercel。项目包括安装、编译运行步骤，以及登录界面灵感来源和Bing壁纸的API获取。已部署网站链接和GitHub源码仓库一并提供。

初学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的博客-优快云博客

使用Vue.js构建静态网站的简约框架.zip
09-24
使用Vue.js构建静态网站的简约框架。.zip,()==[:> A static website generator for building blazing fast websites with Vue.js
创建基于vue项目的静态网站
最新发布
MWNGTAIQI的博客
09-09 1500
如果要测试操作步骤是否有误，可以浏览器输入域名访问网站试试，如果出现报错，很大可能是服务器的配置文件信息有误，例如：域名不正确，root根目录放置html文件的路径不正确，也可能是项目代码本身的问题。如果只是测试的时候用，并不发布到云端，可以选择阿里云提供的这个免费的测试版本，这个测试版本的对域名有要求，不支持部分特殊域名，具体还是查看上面的公告信息。添加的端口范围如下，我们一般选择SSH（22），HTTP（80），MySQL（3306），Redis（6379），其它按项目需求来。
json格式生成器_VuePress - Vue驱动的静态网站生成器
weixin_39594080的博客
11-25 395
还在烦恼怎么做一个简单又美观的文档或博客网站吗？VuePress，让你十分钟就能搭建一个静态网站！Vue.js简介VuePress，是 vuejs 在 Github 上开源的静态网站生成器，项目仓库位于 https://github.com/vuejs/vuepress，目前版本为 v1.5.0。VuePress 结合了 Markdown 语法和 Vue.js，可以从 Markdown 文档中直接...
搭建一个vuepress静态网站及配置
qq_43958325的博客
05-31 8459
搭建一个自己的vuePress的静态网站并使用部分的markdown进行美化
一个用vue写的小网站 过程梳理 一些记录
xidongdong1的博客
11-29 8497
先看实现后的效果： 点击立即购买： 确认购买： 支付成功后跳转到订单列表页面： 项目目录 把导航和底部的内容layout.vue作为跟组件 先完成导航部分的制作，包括登录弹窗的显示，其中涉及到的有layout、dialog、logForm.vue //layout.vue class="app-head">
搭建模仿跨境电商网站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库，尤其适合构建用户界面。它以其轻量级、易上手、组件化开发的...
vue项目实战(模仿京东)，技术栈vue2+vue-router+vuex+webpack+ES6，非常适合练手vue.zip
10-21
这个项目的技术栈包括Vue 2.x、Vue Router、Vuex、Webpack以及ES6等现代前端技术，对于想要深入理解和掌握Vue生态的开发者来说，是一个绝佳的实践平台。下面将逐一解析这些技术点。 首先，Vue 2.x是当前非常流行的...
vue2-elm-master.zip_DEMO_ELM_batqtq_elm vue框架_vue
09-23
在"vue2-elm-master.zip"这个压缩包中，我们看到的是一个基于Vue 2.x版本的示例项目，名为"DEMO_ELM_batqtq_elm"，它可能是一个模仿或学习Elm架构的实现。Elm是一种函数式编程语言，其设计理念对前端开发领域产生了...
精选资源
仿腾讯会议编写的静态页面
07-13
【描述】提到的是这个静态页面模仿了腾讯会议的移动端界面，并实现了基础的跳转功能。这意味着该页面可能包含了多个模拟会议功能的页面，如登录、会议室、设置等，用户可以通过点击链接或按钮在这些页面间切换。使用...
基于VuePress 轻量级静态网站生成器的实现方法
08-27
VuePress是一个基于Vue的轻量级静态网站生成器以及为编写技术文档而优化的默认主题。这么文章给大家详细介绍了vuepress 静态网站生成器的方法，需要的朋友参考下吧
vue搭建仿csdn网站
04-10
上传供自己打算后期学习了再修改，也记录自己学习VUE之旅，踩了很多坑，也收获很多经验，一直在努力学习自己不知道的技术，没有大牛的技术支持，自己慢慢加油，有兴趣的可以下载下来看一下顺便给下宝贵的建议，注：代码注释有点少，含登录注册及很多页面，数据交互基本操作，使用的是egg后台框架，还需要自己后面深入学习更多知识
Vuepress建立静态网站 ,从零基础入门到完整建立第一个网页及部署全过程
CDamogu
07-20 2618
VuePress是一款使用Vue驱动的静态网站生成器，是Vue的作者EvanYou为了方便文档的编写而开发的。默认主题与Vue官方文档一致简洁，少配置，高性能Markdown专为技术文档提供拓展自带PWA自定义主题，可定制程度完全由自己决定VuePress中文网Vuepress在中配置`{}}选项来获取每个文件最后一次git提交的UNIX时间戳(ms)，同时它将以合适的日期格式显示在每一页的底部tip提示warning注意。...
vue - VuePress 静态网站生成详细步骤，从 0-1 新手搭建教程
高级前端工程师
02-06 1325
VuePress静态网站生成方法步骤VuePress 静态网站生成方法步骤Vuepress建立静态VuePress制作个人网页网站 ,从零基础入门到如何使用VuePress开发并部署静态博客网站VuePress-Vue驱动的静态网站生成器入门教程基于VuePress搭建自己专属的静态网站如何用vuepress搭建网站使用VuePress快速搭建博客、在线文档、静态网站基于VuePress构建高基于markdown语法的网站全教程一、静态站点生成器和 VuePress 简介VuePress生成静态文档实践教程
1分钟部署一个属于自己的网站，借助云开发静态网站部署属于自己的网站,部署vue静态网站
编程小石头
12-11 4738
今天来教大家部署一个属于自己的第一个静态网站，因为这里借助小程序云开发的静态服务器资源，所以可以轻松的实现自己网站的部署，部署完以后可以在电脑浏览器，手机浏览器，微信公众号里面展示。 老规矩，先看效果图 简单起见，我这里写一个最简单的html静态网页 然后把这个网页部署到云开发静态网站上 微信上访问效果如下 手机浏览器上访问如下 这也就以为着，我们的网站可以供用户在任何地方访问。下面就来教大家如何快速的部署一个属于自己的网站。 一，开通云开发 这里开通云开发我们借助小程序开发者工具来实现快速开通。.
Vue制作静态页面--Day03
m0_66711291的博客
05-14 3332
希望仿制出游戏PHigros的页面，没有任何功能，只是联系vue语法用 期末考试直接摆烂，能过就行好吧 一、成果展示 当然只是做出样子了，很多地方和自己想的还不一样 二、布局 整体采用flex布局加position定位 单位采用vh和vw 做这个页面最大的收获就是感觉布局上的熟练度增加了 三、滚动容器 点击三个点后会在右侧展开一个容器，选择背景图，超出容器的可以滚动出来。 使用样式overflow：scroll来实现 本来这个东西想封装成一个组件，但是失败了.
vue 仿照现成写网页
chenggong9527的博客
07-16 285
仿照现成项目写网页
VuePress30分钟制作一个Vue静态网站
互联网小队
08-30 1336
1、vuepress新手入门课程（一） 1-1、vuepress简介与安装 https://www.vuepress.cn/ https://node.org/zh-ch node -v npm config set registry=http://registry.npm.taobao.org npm config list npm install -g yarn 安装yarn npm init npm add -D vuepress mkdir docs &&
【Vue】模仿b站网站-----使用vue实现
coding加油站
08-17 3272
vue作业，vue模仿b站，b站，b站网页设计
绿色农业水果商城HTML静态网站模板
该压缩包文件名为“【漂亮大气-PC端中文网站整站...学习者不仅可以从中掌握静态网页制作的核心技能，还能通过模仿与改造，逐步建立起独立开发完整网站的能力，为后续深入学习Vue、React等现代前端框架打下坚实基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值