javascript 开发前端准备
2022/9/15 14:17:18
本文主要是介绍javascript 开发前端准备,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- javascript 开发前端准备
- 安装NodeJs
- 安装Yarn
- Yarn 源的管理
- npx安装
- IDE插件安装
- 参考
javascript 开发前端准备
javascript一般自带了控制台,比如js语法,这是浏览器作为执行javascript的运行环境,但是我们开发不可能在浏览器上开发,我们需要在本地安装nodejs,nodesjs类似于javascript的一个执行器
安装NodeJs
官网地址: https://nodejs.org/en/
这是我当前打开的版本,左边是稳定版,右边是开发版,功能较新,我用的左边的
//NodeJs版本 > node -v v16.15.0 //npm包管理工具版本,高版本自带npm > npm -v 8.5.5
安装Yarn
你可以认为Yarn是npm的增强版, 具体对比可以参考: Yarn vs npm
https://www.cnblogs.com/ypppt/p/13050845.html
//安装Yarn > npm install --global yarn //查看当前安装的版本 > yarn -v 1.22.18
Yarn 源的管理
默认Yarn使用的是国外的源, 这对于国内开放者而言的体验是很差的(由于网速经常拉去不下来包), 因此我们需要切换源, 而yrm 就是专门用于管理yarn源配置的工具, YARN registry manager(yrm):
// 安装yrm > npm install -g yrm //查看yrm的版本 > yrm -V 1.0.6
处理这样查看我们可以通过npm来查看当前系统上已经安装的全局工具:
> npm -g ls /usr/local/lib ├── corepack@0.10.0 ├── npm@8.5.5 ├── yarn@1.22.18 └── yrm@1.0.6
查看当前有哪些可用的源
> yrm ls * npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/ taobao - https://registry.npm.taobao.org/ nj ----- https://registry.nodejitsu.com/ rednpm - http://registry.mirror.cqupt.edu.cn/ npmMirror https://skimdb.npmjs.com/registry/ edunpm - http://registry.enpmjs.org/ yarn --- https://registry.yarnpkg.com
最后我们通过yrm来设置我们的源:
//使用淘宝的源 > yrm use taobao YARN Registry has been set to: https://registry.npm.taobao.org/ NPM Registry has been set to: https://registry.npm.taobao.org/ //测试下淘宝源当前下载速度 > yrm test taobao * taobao - 273ms
npx安装
npm 从5.2版开始,增加了 npx 命令, 如果没有安装请手动安装:
npm只是把包安装到一个目录下,使用时需要指定这个包的绝对路径,而npx可以解决,拿过来直接用
//查看当前npx版本 > npx -v 8.5.5 //如果没有手动安装到全局 > npm install -g npx
IDE插件安装
以下介绍使用vscode开发vue会使用的到的常见插件:
首先是一些前端开发必备插件:
- Auto Rename Tag: 自动完成另一侧标签的同步修改
你的html有<div></div>,如果你改第一个div为span,那么会自动把结尾的div改成span
-
Beautify: 格式化 html ,js,css,目前已经被vscode废弃,我没装
-
ESLint: 代码质量提醒,这个设置比较复杂,我没装
-
open in browser: 鼠标右键快速在浏览器中打开html文件
-
Code Runner: 快速运行
vue开发增强插件:
-
Vue Language Features (Volar): vue3语法支持
-
Vue VSCode Snippets: 代码片段
参考
- npx 使用教程
https://www.ruanyifeng.com/blog/2019/02/npx.html - node-pre-gyp官方介绍
https://www.npmjs.com/package/@mapbox/node-pre-gyp - 20+前端常用的vscode插件
https://www.php.cn/tool/vscode/475531.html - 用Prettier和ESLint自动格式化修复JavaScript代码
https://juejin.cn/post/6971635051998117924 - 2021 VSCode前端插件推荐
https://juejin.cn/post/7014300784649043981
这篇关于javascript 开发前端准备的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署
- 2024-04-14RAG应用开发实战02-相似性检索的关键 - Embedding
- 2024-04-14出海软件草根逆袭打法是什么?
- 2024-04-13鸿蒙原生应用再新丁!企查查 碧蓝航线 入局鸿蒙
- 2024-04-11RAG应用开发实战(01)-RAG应用框架和解析器
- 2024-04-10DevOps已死?2024年的DevOps将如何发展
- 2024-04-10码农必看:常见源代码混淆技术详解