创建个人网站(一)从零开始配置环境,搭建项目

2023-12-16

前言

从刚开始学前端的html直到现在前后端都有在开发,我一直都有一个想法,就是创建自己的网站,我相信大家都有这个想法,那么我决定从零开始创建我自己的个人网站,并在此记录下来(真的是从零开始,刚好电脑也坏了,现在买了个新的,全新,0配置,真正意义上的从零开始)

配置环境

我自己是只有nodejs这一种后端技术栈的,所以只能使用nodejs进行开发后端代码,前端我准备采用vue3的框架,后端采用koa的框架

前端

不管前端后端都要配置node,我这边是用nvm进行版本管理, nvm的github里面有下载地址
然后直接 nvm i 下个最新版本就可以啦

然后是框架,既然选择使用vue3,直接装个vue3的脚手架,(注意这个@哦,没有@的是vue2的脚手架,在你创建项目的时候会报错

npm install -g @vue/cli

直接执行命令,创建项目

vue create xxx

选个vue3就行,也可以自己手动配,虽然我是手动配的,但其实还有些东西搞不懂,也许以后有空会专门出一篇文章进行介绍吧
创建完之后基础的vue项目就创建完啦

后端

后端也选择使用脚手架去配,采用用koa2框架

npm install -g koa-generator
koa2 xxx

然后就创建好啦

遇到的问题

虽然不是第一次配环境了,而且js的环境相对简单,但是还是有很多我没见过或者记不得的问题:

1.安装了nvm和node,vscode没反应

这里的意思是npm -v没有效果
解决方法: nvm安装后vscode不识别node、npm等问题的解决办法

2.安装完脚手架之后vue指令不存在

解决方法: vue : 无法加载文件 C:\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

vscode

插件(以后遇到好的会添进去)

1.prettier
方便格式化代码
可以在设置中将Editor: Default Formatter设置为“esbenp.prettier-vscode”,
并将formatting的format on save勾选,因为这样的话就可以在保存的时候自动格式化
在这里插入图片描述

在这里插入图片描述
2.Auto Rename Tag
可以自动成对的修改标签,不用用alt点两个去修改

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建个人网站(一)从零开始配置环境,搭建项目 的相关文章

  • 事件委托Tab栏切换

  • 浏览器缓存相关面试题一网打尽,理论结合实践,用代码学习缓存问题,建议关注+收藏,(含项目源代码)

    前言 浏览器缓存的问题是面试中关于浏览器知识的重要组成部分 也是性能优化题目的一部分 但是不要被吓到 我话放到这里 就那么点东西 我这一篇文章基本上就涵盖了所有相关的知识点 认真看一遍 所有的问题都是纸老虎 一 准备工作 1 1 拉取仓库
  • CTF之逆向入门

    逆向工程 Reverse Engineering 又称反向工程 是一种技术过程 即对一项目标产品进行逆向分析及研究 从而演绎并得出该产品的处理流程 组织结构 功能性能规格等设计要素 以制作出功能相近 但又不完全一样的产品 逆向工程源于商业及
  • 拼多多详情API开启运营比价新纪元

    随着互联网的快速发展 电商行业正在迅速崛起 拼多多作为一家新兴的电商平台 凭借其独特的营销策略和创新的商业模式 成为了电商行业的一匹黑马 在拼多多的成功背后 其详情API接口营销起到了至关重要的作用 本文将详细介绍拼多多详情API接口营销的
  • 如何给 unplugin-vue-components/vite 写一个简单的 resolver

    大部分工作 unplugin vue components 都已经处理好了 我们只需要接收组件名来判断是否是自己的组件 然后处理对应的导入逻辑 一共 3 个字段 as 重命名类似 import componentNameReName fro
  • 接口测试之Fiddler弱网测试

    前言 目前市面上的APP功能越来越丰富 移动端测试也越显为重要 因为用户在网速慢的情况下 你的网站 软件 总能出现各种各样的问题 请不要忽略这一点 针对在不同的网络情况下 接下来 本篇要讲述的就是在通过fiddler对APP进行模拟弱网测试
  • 每天10个前端小知识 <Day 1>

    前端面试基础知识题 1 将数组的length设置为0 取第一个元素会返回什么 设置 length 0 会清空数组 所以会返回 undefined 2 e target 和 e currentTarget 有什么区别 e target 触发事
  • 【计算机毕业设计】实验室预约管理

    身处网络时代 随着网络系统体系发展的不断成熟和完善 人们的生活也随之发生了很大的变化 人们在追求较高物质生活的同时 也在想着如何使自身的精神内涵得到提升 而读书就是人们获得精神享受非常重要的途径 为了满足人们随时随地只要有网络就可以看书的要
  • 38条Web测试经验分享

    1 页面链接检查 每一个链接是否都有对应的页面 并且页面之间切换正确 可以使用一些工具 如LinkBotPro File AIDCS HTML Link Validater Xenu等工具 LinkBotPro不支持中文 中文字符显示为乱码
  • 前端必备的 web 安全知识手记

    前言 安全这种东西就是不发生则已 一发生则惊人 作为前端 平时对这方面的知识没啥研究 最近了解了下 特此沉淀 文章内容包括以下几个典型的 web 安全知识点 XSS CSRF 点击劫持 SQL 注入和上传问题等 下文以小王代指攻击者 话不多
  • 每天10个前端小知识 <Day 6>

    前端面试基础知识题 1 使用js实现二分查找 二分查找 也称为折半查找 是指在有序的数组里找出指定的值 返回该值在数组中的索引 查找步骤如下 从有序数组的最中间元素开始查找 如果该元素正好是指定查找的值 则查找过程结束 否则进行下一步 如果
  • 基于java的web仓库管理系统设计与实现

    基于java的web仓库管理系统设计与实现 I 引言 A 研究背景和动机 基于Java的Web仓库管理系统是近年来快速发展的领域之一 它提供了丰富的功能 如数据存储 数据检索 数据分析和数据可视化等 本文将重点介绍基于Java的Web仓库管
  • 低代码-详情页组件设计

    效果图 详情页数据结构定义 layout 按钮数据 buttonLayout headButton 页头按钮 footButton 页脚按钮 详情页表单配置 config 配置组件列表 detailLayout 默认行为 进表单初始化 只展
  • 课设:NFA确定化和最小化程序的设计与实现(html+css+js实现)

    文章目录 问题描述 待解决问题 1 如何存储NFA或者是DFA 2 NFA多初态问题 3 子集化过程思路 4 分割法过程思路 使用方法 下载链接 问题描述
  • JVM优化之 -Xss -Xms -Xmx -Xmn 参数设置

    JVM优化之 Xss Xms Xmx Xmn 参数设置 XmnXmsXmxXss有什么区别 Xmn Xms Xmx Xss都是JVM对内存的配置参数 我们可以根据不同需要区修改这些参数 以达到运行程序的最好效果 Xms 堆内存的初始大小 默
  • SpringBoot中整合MybatisPlus快速实现Mysql增删改查和条件构造器

    场景 Mybatis Plus 简称MP 是一个Mybatis的增强工具 只是在Mybatis的基础上做了增强却不做改变 MyBatis Plus支持所有Mybatis原生的特性 所以引入Mybatis Plus不会对现有的Mybatis构
  • 每天10个前端小知识 <Day 14>

    前端面试基础知识题 1 CSSOM树和DOM树是同时解析的吗 浏览器会下载HTML解析页面生成DOM树 遇到CSS标签就开始解析CSS 这个过程不会阻塞 但是如果遇到了JS脚本 此时假如CSSOM还没有构建完 需要等待CSSOM构建完 再去
  • 【js学习之路】遍历数组api之 `filter `和 `map`的区别

    一 前言 数组是我们在项目中经常使用的数据类型 今天我们主要简述作用于遍历数组的api filter 和 map 的区别 二 filter和map的共同点 首先 我们主要阐述一下 filter 和 map 的共同点 api的参数都是回调函数
  • 深入解析 YAML 配置文件:从语法到最佳实践

    一 认识YAML YAML YAML Ain t Markup Language 是一种人类可读的数据序列化语言 它的设计目标是使数据在不同编程语言之间交换和共享变得简单 YAML采用了一种简洁 直观的语法 以易于阅读和编写的方式表示数据结
  • 获取年与年之间的所有年份

    function getYearsBetween startYear endYear var years 存放结果的数组 for var year startYear year lt endYear year years push year

随机推荐

  • 2023 Java 面试题精选40道,包含答案

    Java中什么是重载 什么是覆盖 它们有什么区别 重载是指在同一个类中 方法名相同但参数类型 个数或顺序不同的情况下 编译器会根据参数列表的不同自动调用不同的方法 覆盖是指子类重写父类的同名方法 使得子类在调用该方法时执行子类的实现而不是父
  • 2024java面试看完这篇笔记薪资和offer稳了!

    新的一年抓住机会 不管跳槽涨薪 还是学习提升 这篇笔记你都不应该错过 为了帮大家节约时间 整理了这篇 Java面试 核心知识点整理 以及 金三银四高频面试合集 希望大家在新的一年都能拿到理想的薪资和offer 内容涵盖 计算机基础 Java
  • Java面试题及答案整理( 2023年12月最新版,持续更新)

    秋招金九银十快到了 发现网上很多Java面试题都没有答案 所以花了很长时间搜集整理出来了这套Java面试题大全 这套互联网 Java 工程师面试题包括了 MyBatis ZK Dubbo EL Redis MySQL 并发编程 Java面试
  • 面试官:什么是JWT?为什么要用JWT?

    目前传统的后台管理系统 以及不使用第三方登录的系统 使用 JWT 技术的还是挺多的 因此在面试中被问到的频率也比较高 所以今天我们就来看一下 什么是 JWT 为什么要用 JWT 1 什么是 JWT JWT JSON Web Token 是一
  • 浅析特征增强&个性化在CTR预估中的经典方法和效果对比

    在CTR预估中 主流都采用特征embedding MLP的方式 其中特征非常关键 然而对于相同的特征 在不同的样本中 表征是相同的 这种方式输入到下游模型 会限制模型的表达能力 为了解决这个问题 CTR预估领域提出了一系列相关工作 被称为特
  • 总有人说鸿蒙是安卓套壳?鸿蒙5.0之后彻底摆脱安卓

    鸿蒙系统的操作逻辑与安卓基本上差不多 这和安卓系统没啥区别 是不是就是安卓系统套了一个壳啊 为什么到今天还是有不少人在争论它到底是不是安卓套壳 这与鸿蒙早期 完全自主研发 的 过激 宣传不无关系 其次就是鸿蒙生态环境上的不足 确实 华为一开
  • 鸿蒙系统的崛起对程序员来说是机遇、还是挑战呢?

    前言 最近 一个话题在程序员圈子里激起了热烈讨论 那就是鸿蒙系统的崛起是否会影响程序员的就业和发展 我该转去学鸿蒙开发吗 鸿蒙前景如何 值不值得投入时间研究 对此 程序员们表达了各种疑虑和困惑 的确 一个全新的操作系统的出现确实让人眼花缭乱
  • go-zero 开发之安装 etcd

    本文只涉及 Linux 上的安装 二进制安装 下载二进制安装包 ETCD VER v3 4 28 ETCD VER v3 5 10 DOWNLOAD URL https github com etcd io etcd releases do
  • Quartz定时任务运行时,能够否对某个任务重新调度呢?

    背景 quartz 是一个功能丰富 开源 分布式的任务调用框架 我参与的很多项目都用它来实现定时调度功能 关于定时任务 有一个常见的需求是 由 Web 应用来控制定时任务的启动 停止 调度周期等 本文探讨的是 对于当前正在 调度的 耗时较长
  • go-zero开发入门之网关往rpc服务传递数据2

    go zero 的网关服务实际是个 go zero 的 API 服务 也就是一个 http 服务 或者说 rest 服务 http 转 grpc 使用了开源的 grpcurl 库 当网关需要往 rpc 服务传递额外的数据 比如鉴权数据的时候
  • 一呼百应!腾讯、阿里等全都支持鸿蒙了,安卓该担心了

    前言 众所周知 目前华为鸿蒙系统 已经是全球第三大智能手机系统 仅次于安卓 iOS 不过大家也都清楚 这个第三 实际上还是有水份的 因为鸿蒙其实并没有自己的生态 靠的是兼容安卓生态 真正的纯血鸿蒙APP 仅几十个 如果靠着这几十个APP 完
  • 短视频制作:从构思到发布的全方位指南

    在当今数字化时代 短视频已成为备受欢迎的媒体形式 凭借其简洁有趣的内容 短视频成功吸引了大量观众的关注 然而 制作一部引人入胜的短视频并非易事 本文将为你提供从目标设定到平台发布的全面指导 帮助你制作出令人难以忘怀的短视频 第一步 明确目标
  • 有哪些PDF转图片工具好用?PDF转图片免费软件推荐

    在一个阳光明媚的下午 你正在翻阅着一份重要的PDF文件 想要快速将其中的内容以图片形式分享给朋友 然而 复制粘贴不仅繁琐 还会失去原本的排版和格式 那么 如何将PDF文件转换成图片呢 今天就来介绍两款可以实现这一功能的免费软件 如果你也想知
  • 你知道ai写作工具哪个好吗?教你用AI写年终总结

    又是一年的十二月到了 每年到这个时候 朋友圈都总会出现一首常驻歌曲 十二月的奇迹 身为打工人的大家应该都希望 在忙碌了一年的最后一个月被奇迹眷顾吧 不过俗话说得好 靠人不如靠己 与其把自己交给命运的奇迹 那不如自己也努力争取一下 在老板面前
  • 鸿蒙开发入门:快速修复命令行调试开发指导

    快速修复命令行调试开发指导 当前阶段 HarmonyOS为开发者提供了命令行的调试开发工具可供使用 比如 包名为com ohos quickfix的示例应用 版本号为1000000 该应用的当前版本运行中有某问题需要修复 此时 开发者可参考
  • 主动学习与弱监督学习

    人工智能数据的获取没有想象中的那么简单 虽然我们早已身处大数据的浪潮下 很多公司在获取数据的大浪中翻滚却始终没有找到一个合适的获取数据的渠道 很多情况下 获取高质量的人工智能数据需要消耗大量的人力 时间 金钱 但是对于未来世界 以 人机协同
  • Java处理SSH-免密登录

    前提 需要测试主机之间能够免密 配置ssh请自行百度 jar包 旧版 com jcraft jsch 仅支持老版的密钥格式 旧版本 RSA
  • go-zero开发入门-API网关开发示例

    开发一个 API 网关 代理 https blog csdn net Aquester article details 134856271 中的 RPC 服务 网关完整源代码 file main go package main import
  • 设计之妙,理解Android动画流程

    本文基于Android 12进行学习研究 参考 深入理解Android内核源码 思路学习总结 如有理解不对 望各位朋友指正 另外可能留存一些疑问 留后续再探索 输出只是为了分享和提升自己 动画初始化 按照窗口管理策略类中的定义 动画应该被分
  • 创建个人网站(一)从零开始配置环境,搭建项目

    目录 前言 配置环境 前端 后端 遇到的问题 1 安装了nvm和node vscode没反应 2 安装完脚手架之后vue指令不存在