前端开发环境安装、配置、项目搭建全教程
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
- 输入项目名称
- 选择vue
- 选择TS
- 进入项目
- npm install
- npm run dev