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

weilai 2022年4月7日00:20:33建站知识评论20字数 485阅读1分37秒

ElementUl是饿了么前端团队推出的桌面端UI框架,具有是简洁、直观、强悍和低学习成本等优势,非常适合初学者使用。因此,本次项目使用ElementUI 框架来完成 个人博客的主体开发,欢迎大家讨论和交流。文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html


1. 安装文章源自佳杰网络-https://www.jiajievip.com/63.html

本次开发使用 vs code + node +element-ui,因此需要事先完成软件安装:
下载:vs code, node, element-ui 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用:文章源自佳杰网络-https://www.jiajievip.com/63.html

npm i element-ui -S文章源自佳杰网络-https://www.jiajievip.com/63.html

2. 创建项目文章源自佳杰网络-https://www.jiajievip.com/63.html

打开vs code 进入拟创建项目的文件夹,创建新建终端进入命令行模式:文章源自佳杰网络-https://www.jiajievip.com/63.html

vue init webpack blog-demo // 创建项目: blog-demo, 等待项目初始化完成
cd blog-demo
npm run dev // 启动, 默认端口8080文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html

浏览器打开网址:http://localhost:8080文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html

3. 前台页面文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html

在创建src/pages/article 和 src/pages/home 文件夹:文章源自佳杰网络-https://www.jiajievip.com/63.html

分别添加 页面详情 和 表头 和 登录控制:文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html

增加密码验证:文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html

最终效果:文章源自佳杰网络-https://www.jiajievip.com/63.html

新手如何搭建个人网站文章源自佳杰网络-https://www.jiajievip.com/63.html

这样我们就完成了一个简单个人 博客前端部分了, 小伙伴们是不是觉得很简单呢?文章源自佳杰网络-https://www.jiajievip.com/63.html

weilai
  • 本文由 发表于 2022年4月7日00:20:33
  • 转载请务必保留本文链接:https://www.jiajievip.com/63.html
电商网站搭建五大流程(小白也能做网站) 建站知识

电商网站搭建五大流程(小白也能做网站)

现如今人们都十分青睐于在互联网上搜索和了解信息,因此很多企业公司都会寻找搭建一个属于自己的网站来进行产品以及服务的宣传推广,那么搭建网站有哪些步骤呢?下面小编就来为大家解答这一问题: 一、明确建站意图...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: