新手如何搭建个人网站(搭建属于自己的博客网站)

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

新手如何搭建个人网站(搭建属于自己的博客网站)


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-demo
npm run dev // 启动, 默认端口8080

新手如何搭建个人网站(搭建属于自己的博客网站)

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

新手如何搭建个人网站(搭建属于自己的博客网站)

3. 前台页面

新手如何搭建个人网站(搭建属于自己的博客网站)

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

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

新手如何搭建个人网站(搭建属于自己的博客网站)

新手如何搭建个人网站(搭建属于自己的博客网站)

增加密码验证:

新手如何搭建个人网站(搭建属于自己的博客网站)

最终效果:

新手如何搭建个人网站(搭建属于自己的博客网站)

这样我们就完成了一个简单个人 博客前端部分了, 小伙伴们是不是觉得很简单呢?

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有。若您需要使用非免费的软件或服务,请购买正版授权并合法使用。本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理。
建站知识

新手如何做好网站建设(网站建设前期准备工作)

2022-4-7 0:17:54

建站知识

如何快速低成本搭建拥有自己的网站?

2022-4-7 0:25:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索