【前端开发环境安装、配置、项目搭建全教程】

本文提供了一步一步的前端开发环境安装、配置指南,包括Node.js、VSCode、Git的安装,接着通过Vite快速搭建Vue3项目,并详细介绍了如何集成Vue Router、Vuex和Axios,为开发者提供了全面的前端项目搭建流程。
摘要由CSDN通过智能技术生成

前端开发环境安装、配置、项目搭建全教程

1.Node环境安装

简单的说 Node.js 就是运行在服务端的 JavaScrip,基于 Chrome JavaScript 运行时建立的一个平台,Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。

1.node.js官网下载:下载地址

在这里插入图片描述

2.依据自己电脑Windows、macOS选择安装:

根据自己电脑系统选择安装

3.下载完毕后,依据安装流程傻瓜式一键安装。然后打开cmd命令行窗口,输入node -v查看node是否安装成功

在这里插入图片描述

2.VsCode开发工具安装

VS Code是这两年非常热门的一款开发工具,它不仅有提升开发体验的界面、轻量化的编辑器,还有丰富而强大的插件,这些优秀的插件使得VS Code生态体系更加吸引人,让开发效率大大提升

1.vscode官网下载:下载地址

依据自己电脑系统选择对应版本下载
然后一键式傻瓜安装
在这里插入图片描述

2.vscode常用必备基础插件

1.Chinese (Simplified) Language Pack for Visual Studio Code.

作用:编译器汉化
在这里插入图片描述

2.Prettier - Code formatter

作用:对代码进行快速格式化
在这里插入图片描述

3.Auto Rename Tag

作用:自动重命名 HTML/XML 标签
在这里插入图片描述

4.Auto Close Tag

作用:自动闭合 HTML/XML 标签:在这里插入图片描述

5.Git History

作用:在VS code中集成git工具,查看git记录,文件历史记录,比较分支及提交代码等
在这里插入图片描述
vscode中其他优秀高效插件可在评论区分享

3.Git工具安装

Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目

1.Git官网下载 下载地址

根据电脑系统选择对应下载
一键式傻瓜安装
在这里插入图片描述
安装完毕后在cmd命令窗口输入git --version查看
在这里插入图片描述

2.Git配置

安装好后,在桌面任意位置右键,点击Git bash here,会弹出命令窗口
在这里插入图片描述

配置用户信息
$ git config --global user.name ""
$ git config --global user.email ""
Git常用命令
git init                                                  # 初始化本地git仓库(创建新仓库)
git status                                                # 查看当前版本状态(是否修改)
git add .                                                 # 增加当前子目录下所有更改过的文件
git commit -m 'xxx'                                       # 提交
git branch                                                # 显示本地分支
git push origin master                                    # 将当前分支push到远程master分支
git pull origin master                                    # 获取远程分支master并merge到当前分支

4.前端框架脚手架安装(技术栈vite+vue3+ts搭建为例)

vite+vue3+ts为目前最新技术栈,很有可能也是今后vue前端趋势,接下来则手把手教你学会构建一个项目

Vite快速搭建

1.打开命令行窗口
2.使用npm或者yarn

npm

npm init @vitejs/app

yarn

yarn create @vitejs/app
  1. 输入项目名称
  2. 选择vue
  3. 选择TS
  4. 进入项目
  5. npm install
  6. npm run dev
  • 15
    点赞
  • 245
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
window 前端开发环境的搭建过程如下: 1. 安装 Node.js前端开发中,我们常常使用到 Node.js 做为运行环境。可以到 Node.js 官网下载最新的 Windows 版本安装包,下载完成后运行安装程序进行安装即可。 2. 安装代码编辑器:选择一款适合自己的代码编辑器,如 Visual Studio Code、Sublime Text、Atom 等。下载安装后打开即可使用。 3. 安装版本控制工具:推荐使用 Git 进行版本控制。可以在 Git 官网下载并安装最新版本的 Git,安装完成后通过命令行工具检查版本是否安装成功:`git --version` 4. 安装代码托管工具:推荐使用 GitHub 作为代码托管平台。在 GitHub 官网注册账号并创建仓库,以便于将项目代码进行托管。 5. 安装包管理工具:在前端开发中,常常需要使用到一些第三方包和工具。推荐使用 npm 进行包管理。npm 是随同 Node.js 一起安装的包管理工具。可以通过命令行工具检查 npm 是否安装成功:`npm -v` 6. 初始化项目:打开命令行工具,将命令行的当前目录切换到项目所在的文件夹下。运行 `npm init` 命令初始化项目,按照提示进行一些基本配置,如项目名称、版本号等。 7. 安装所需依赖:通过 `npm install [package]` 命令来安装项目需要的依赖,如常见的 React、Vue、Webpack 等。 8. 配置项目:根据项目需求,进行相应的配置,如创建配置文件、设置编译打包规则等。 9. 编写代码:使用所选的代码编辑器打开项目文件夹,并开始编写前端代码。 10. 运行项目:在命令行工具中运行相应的命令,如 `npm start`,来启动项目并在浏览器中查看网页效果。 11. 进行版本管理:使用 Git 命令来进行版本管理,比如添加、提交和推送代码等。 通过以上步骤,我们就可以在 Windows 系统上成功搭建一个前端开发环境

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值