比德勒科技

vue搭建网站

日期:2024-07-11 21:03 / 作者:www.biddlecn.com

如何搭建低代码平台?

头条,抖音,火山小视频,快手

独立站域名怎么起?

抖音,小火山,西瓜,头条各大平台搜索搞笑视频都有,搞笑视频,搞笑段子,搞笑配音

新手建站 无需购买服务器10分钟快速部署你的静态网页

阿里云云开发平台重磅推出开源应用中心,聚合最热门的开源应用,让你像安装app一样快速上线一个网站。面向新人和持续活跃的开发者用户推出上线激励加油包,最高100元无门槛代金券免费送,现在体验还能够领取年轻人的养生神器,桌面不锈钢保温杯!

聚合最热门的开源应用

开源应用中心聚合了目前最热门的前端开源应用模版,让大家真正可以做到像安装APP一样来上线一个网站。目前已经支持最热门的前端框架,包括Vue.js、React、Nuxt.js、Next.js、AntDesign等,还有内容管理平台Hexo、Docusaurus、VuePress、Sapper等。使用部署开源模版非常适合您的以下场景:

个人学习:轻松创建个人主页、博客等网站,边部署边学习。协同开发:创建信息管理系统、CMS等前端项目,多人协同维护开发。

云开发平台同样面向广大的开源作者征集应用,对于热门的应用我们能够提供现金激励、以及流量曝光等扶持。

开源应用一键同步一键部署

阿里云云开发平台前端应用部署功能旨在为前端开发者改善工作环境,优化前端开发和部署体验。同时还可以结合云开发平台云原生的架构能力和主机应用的部署能力,让前后端应用能够更高效地协同。

操作简单:无需购买服务器、配环境、手动上传文件等,云开发平台都可以帮你自动操作,包括在需要时随时一键上线/下线。使用零成本: 支持GitHub和云效的Codeup仓库,快速将仓库的代码进行构建部署。免费资源扶持: 免费提供临时的测试域名,对于新用户和持续活跃的用户提供免费的云资源加油包。无数量限制: 没有使用的repo数量和应用数量的限制, 不管是开源仓库还是自己账户下的repo,每一个代码repo都可以部署为一个静态网站。简单几步使用云开发平台上线静态应用

1. 账号准备工作

你需要一个阿里云账号,并使用阿里云账号登录云开发平台 (),按照提示创建团队,点击同意协议。没有阿里云账号就在登录页面注册一个继续登录。拥有Github账号 (),没有就注册一个。为保证最好的使用体验,请使用Chrome浏览器。未开通阿里云OSS的用户,点击链接 (?code=oss)开通OSS服务。OSS开通免费,有一定的免费额度,超过额度之后按量付费。

2. 创建应用

2.1 选择应用中心任意模版创建应用

选择应用中心任意模版创建应用。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。 绑定GitHub账号。授权完成后选择来源仓库为GitHub,按照提示点击去绑定,绑定GitHub帐号,登录后并点击Authorize AliyunWorkbench允许云开发平台构建、发布你的GitHub代码为可访问的网站。 绑定完成后返回应用创建页面,代码仓库按照默认「模板仓库」以及默认主干分支不用操作,并点击「下一步」。 填写应用信息完成创建。填写必要的的应用信息完成创建(我们已提供默认配置),成功后进入到应用详情和部署界面。首次登录并没有可选所属生产线,点击右侧自动创建产品线即可。

2.2 使用自己的仓库应用创建

选择自己仓库里需要部署的应用。除了可以使用应用中心的模版创建网站,云开发平台也支持使用本地代码或者开源代码创建静态网站。与通过模版中心的应用创建的区别在于,在绑定Gihutb之后选择“自己的仓库”,找到上一步自己创建的GitHub仓库及master分支。然后在应用详情页面根据以上的步骤继续填写即可。 设定部署配置。当部署的是您自己的代码仓库时,开发平台需要您根据具体代码进行简单配置来部署成功:编写build.sh:代码从源码,经过npm打包编译等过程,到生成为纯粹HTML/CSS/JS静态文件的全过程的shell指令,需要被完整填写到发布分支根路径下的build.sh文件中,例如:

不知道如何操作?您也可直接点击一次“部署”按钮,之后,对默认生成的build.sh内容进行任意修改:

b. 填写静态文件相对目录:在build.sh执行后,从代码生成出的静态文件所在的相对目录,需要被填写到“部署配置-资源路径”中。

Tip:例如React应用(如图),一般会填写“./build”;Vue应用则一般为“./dist”。

c. 调整配置:当您完成上述步骤后,发现自己的代码仍然部署错误时,需查看排查部署日志,对上面的build.sh和部署资源路径进行修改。常见的几种部署错误情况如下:

3. 在日常环境部署站点

一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。 Dinosaurs网站日常环境部署好了。日常环境的测试域名也是可以访问的,点击访问已部署网站按钮会出现一个弹出,点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后,可以继续本地编码,并将代码push到应用的“基本信息”中对应的代码仓库内。

4. 配置自定义域名在线上环境上线

配置线上环境自定义域名。在功能开发验证完成后要在线上环境进行部署,在线上环境的「部署配置」-「自定义域名」中填写自己的域名。例如我们添加一个二级域名 company.workbench.fun 来绑定我们部署的前端应用。然后复制自定义域名下方的API网关地址对添加的二级域名进行CNAME配置。 配置CNAME地址。复制好 API网关域名地址后,来到你自己的域名管理平台(此示例中的域名管理是阿里云的域名管理控制台,请去自己的域名控制台操作)。添加记录的「记录类型」选择「CNAME」,在「主机记录」中输入你要创建的二级域名,这里我们输入「company」,在「记录值」中粘贴我们之前复制的 API网关域名地址,「TTL」保留默认值或者设置一个你认为合适的值即可。 在线上环境部署上线。回到云开发平台的应用详情页面,按照部署的操作,点击线上环境的「部署按钮」,部署完成以后就在你自定义的域名进行了上线。CNAME 生效之后,我们输入 company.workbench.fun(示例网址) 可以打开部署的页面。至此,如何部署一个应用到线上环境,如何绑定自己的域名来访问一个线上的应用就完成了,赶紧部署自己的应用到线上环境,用自己的域名玩起来吧 ;)

原文链接:?utm_content=g_1000314028

本文为阿里云原创内容,未经允许不得转载。

使用vue制作一个门户网站

要使用Vue.js制作门户网站,可以按照以下步骤进行:

确定项目需求和设计:首先,明确门户网站的功能和设计需求。确定需要展示的页面、内容结构和交互特性等。创建一个设计草图或者原型,以便在开发过程中参考。设置开发环境:安装Node.js和npm(Node包管理器),然后使用npm安装Vue CLI(命令行界面)工具。Vue CLI提供了快速搭建和管理Vue.js项目的功能。创建Vue项目:使用Vue CLI创建一个新的Vue项目。运行命令 vue create project-name,根据提示选择需要的配置选项。Vue CLI会自动安装所需的依赖项和项目结构。编写组件和路由:根据门户网站的设计,创建Vue组件来表示不同的页面和页面元素。可以使用Vue的单文件组件(.vue文件)来组织HTML模板、CSS样式和JavaScript代码。同时,使用Vue Router来设置页面间的导航和路由。处理数据和状态管理:如果门户网站需要获取和展示动态数据,可以使用Vue的HTTP库(如axios)来发送请求并处理响应。如果项目较复杂,考虑使用Vuex来进行全局状态管理。实现页面布局和样式:使用HTML和Vue模板语法构建页面的结构,然后使用CSS和Vue组件样式来设计网站的外观和样式。可以使用CSS预处理器(如Sass或Less)来提高开发效率。添加交互和动画:使用Vue的指令和事件处理机制来实现页面的交互特性,例如按钮点击、表单提交等。可以结合Vue的动画系统(如Vue Transition)来添加过渡和动画效果。运行和测试:在开发过程中,使用命令 npm run serve 启动开发服务器,以便在浏览器中实时预览和调试门户网站。同时,编写单元测试和端到端测试来确保网站的功能和质量。构建和部署:当开发完成后,使用命令 npm run build 构建生产环境的网站文件。将生成的文件部署到Web服务器上,以使门户网站可在互联网上访问。

请注意,以上步骤仅提供了一个基本的指导,实际开发中可能需要根据具体情况进行调整和补充。同时,建议查阅Vue.js官方文档和其他相关资源,以获得更详细的指导和最佳实践。

VuePress 从零开始搭建自己的博客网站

前言

俗话说的好:好记性不如烂笔头。做技术的,有自己的一个博客网站,不仅可以记录自己的学习笔记,分享自己的技术文章,还可以和志同道合的开发者交流,何乐而不为呢?

那么如何简单高效diy一个自己的博客网站呢?VuePress 就是一款非常优秀的静态网站生成器,它基于 Vue 构建,以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。

简单来说,只要你配置好项目后,就可以直接写Markdown文档,然后生成静态网站,部署到Github、Gitee、Coding等静态网站托管平台,就可以直接访问了。

技术选型

这个是VuePress的官方文档(介绍 | VuePress),有兴趣深挖VuePress配置信息的同学可以过一遍文档。官方也给出了选择VuePress,而不是Nuxt、VitePress、GitBook等其他工具的理由。

另外,如果是使用VuePress的默认主题的话,可能还是会让博客看起来比较单调,所以这里推荐使用vuepress-theme-reco(vuepress-reco),一个基于 VuePress 2.x 的主题,这个主题插件看起来还是挺好看的,今天就以这个主题为例,来手把手教大家如何搭建一个属于自己的博客网站。

安装配置

快速开始

安装vuepress-theme-reco,官方给出了三种方式:

npx

# 初始化,并选择 2.xnpx @vuepress-reco/theme-cli init

npm

# 初始化,并选择 2.xnpm install @vuepress-reco/theme-cli@1.0.7 -gtheme-cli init

yarn

# 初始化,并选择 2.xyarn global add @vuepress-reco/theme-cli@1.0.7theme-cli init

这里我选择第一种方式

1. 先新建一个文件夹命名vuepress。

2. 进入vuepress文件夹,执行命令 `npx @vuepress-reco/theme-cli init` 选择2.x版本。

3. 用vscode打开项目, npm install 安装依赖,然后 npm run dev 启动项目,可以看到,项目是用vite来构建的。

自定义配置

项目的文件目录如下:

- .vuepress 是vuepress的配置目录

- blogs 是放置博客目录

- docs 是放置文档目录

README.md是首页,这边可以修改成自己的信息

---home: truemodules:- BannerBrand- Blog- MdContent- FooterbannerBrand: bgImage: '/bg.svg' title: 码无止境の世界 description: Code is Life tagline: 在无止境的编程代码世界里遨游,用代码改变我们的生活。 buttons: - { text: 进入, link: '/categories/qianduan/1/' } - { text: 公众号, link: '/docs/wechat', type: plain } socialLinks: - { icon: LogoGithub , link: '' }blog: socialLinks: - { icon: LogoGithub , link: '' } - { icon: LogoWechat , link: '/docs/wechat' }isShowTitleInHome: trueactionText: AboutactionLink: /views/other/about---

首页效果如下:

config.ts配置修改

import { defineUserConfig } from "vuepress";import recoTheme from "vuepress-theme-reco";export default defineUserConfig({title: "码无止境 Code is Life",description: "在无止境的编程代码世界里遨游,用代码改变我们的生活",theme: recoTheme({style: "@vuepress-reco/style-default",logo: "/logo.png",author: "码无止境",authorAvatar: "/logo.png",lastUpdatedText: "",navbar: [ { text: "首页", link: "/" }, { text: "前端", link: "/categories/qianduan/1/" },// { text: "后端", link: "/categories/houduan/1/" },// { text: "游戏", link: "/categories/youxi/1/" }, { text: "工具", link: "/categories/tools/1/" }, ], }),});

开始写文章啦~~

1. 首先在blogs目录下创建你自己分类的文件夹

2. 我这边按类别向下按日期分类文章

文章中用到的图片,只需要截图后粘贴进markdown文档中,会自动将图片放置到同级目录的image文件夹下。另外,在vscode中写markdown文档,用下面这些vscode扩展就可以更加愉快高效地写作。

3. 每篇文章的开头都是以---和---包裹的文章头,其中tags定义好后,vuepress会自动根据你的tag进行文章标签分类,categories则会根据类别整理文章。

这边如果分类名称是中文的话,在config.ts中定义link时候就是按照中文拼音来定义的,可以看上面的config配置信息 ??

文章分类页面如下


至于怎么写好Markdown文档,可以参考[VuePress官网关于Markdown的介绍](Markdown | VuePress)

部署上线

基本上我们的博客已经搭建完成了,接下来就是部署上线了,可以使用Github Pages,免费让我们的博客上线。

1. 首先,在Github上创建一个仓库,仓库名用你的用户名+github.io: <USERNAME>.github.io

如果你访问github很慢的话,可以参考这里 [Github访问速度太慢?一个小工具就够了!]

2. 然后,将你的仓库克隆到本地,再将你的vuepress项目拷贝到仓库根目录下,然后将仓库推送到github的master主分支上。

3. 另外还需要创建另一个分支gh-pages用来发布博客静态页面,可以在你的项目根目录下新建deploy.sh脚本,内容如下:

# 确保脚本抛出遇到的错误set -e# 生成静态文件npm run build# 进入生成的文件夹cd .vuepress/distgit initgit add -Agit commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果发布到 https://<USERNAME>.github.io/<REPO># git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master:gh-pages# 我的配置如下git push -f master:gh-pagescd -

打开项目文件位置,右键用git bash执行deploy.sh脚本,将本地项目推送到github的gh-pages分支。

#执行部署脚本./deploy.sh

4. 在Github仓库的设置Settings中找到Pages,修改相应配置后,点击Save。

这样每次执行deploy脚本后,github的Actions会自动执行部署工作流,你的博客页面就会自动更新了。

5. 成功部署后就可以访问你的个人博客了,访问地址就是 <USERNAME>.github.io。

我的已经成功上线了,欢迎围观![呲牙] ](码无止境 Code is Life)

完结撒花 [撒花][撒花][撒花]