自己在家怎么搭建个人网站(新手如何搭建个人网站)

 2024-09-16  阅读 591  评论 0

摘要:ElementUl是饿了么前端团队推出的桌面端UI框架,具有是简洁、直观、强悍和低学习成本等优势,非常适合初学者使用。因此,本次项目使用ElementUI 框架来完成 个人博客的主体开发,欢迎大家讨论和交流。1. 安装本次开发使用 vs code node element-ui,因此需要事先完

ElementUl是饿了么前端团队推出的桌面端UI框架,具有是简洁、直观、强悍和低学习成本等优势,非常适合初学者使用。因此,本次项目使用ElementUI 框架来完成 个人博客的主体开发,欢迎大家讨论和交流。

自己在家怎么搭建个人网站(新手如何搭建个人网站)(1)


1. 安装

本次开发使用 vs code node element-ui,因此需要事先完成软件安装:下载:vs code, node, element-ui 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用:

npm i element-ui -S

2. 创建项目

打开vs code 进入拟创建项目的文件夹,创建新建终端进入命令行模式:

vue init webpack blog-demo // 创建项目: blog-demo, 等待项目初始化完成cd blog-demonpm run dev // 启动, 默认端口8080

自己在家怎么搭建个人网站(新手如何搭建个人网站)(2)

浏览器打开网址:http://localhost:8080

自己在家怎么搭建个人网站(新手如何搭建个人网站)(3)

3. 前台页面

自己在家怎么搭建个人网站(新手如何搭建个人网站)(4)

在创建src/pages/article 和 src/pages/home 文件夹:

分别添加 页面详情 和 表头 和 登录控制:

自己在家怎么搭建个人网站(新手如何搭建个人网站)(5)

自己在家怎么搭建个人网站(新手如何搭建个人网站)(6)

增加密码验证:

自己在家怎么搭建个人网站(新手如何搭建个人网站)(7)

最终效果:

自己在家怎么搭建个人网站(新手如何搭建个人网站)(8)

这样我们就完成了一个简单个人 博客前端部分了, 小伙伴们是不是觉得很简单呢?,如大家如需要源码,欢迎联系www.infersite.com

,

版权声明:xxxxxxxxx;

原文链接:http://cn.tdroid.net/cebcdCz0EBwgCVlw.html

发表评论:

管理员

  • 内容267615
  • 积分0
  • 金币0
关于我们
lecms主程序为免费提供使用,使用者不得将本系统应用于任何形式的非法用途,由此产生的一切法律风险,需由使用者自行承担,与本站和开发者无关。一旦使用lecms,表示您即承认您已阅读、理解并同意受此条款的约束,并遵守所有相应法律和法规。
联系方式
电话:
地址:广东省中山市
Email:
注册登录
注册帐号
登录帐号

Copyright © 2022 太卓开发网 Inc. 保留所有权利。 泰达科技网易库网

页面耗时0.2911秒, 内存占用1.33 MB, 访问数据库18次