前端开发环境搭建-程序员宅基地

技术标签: webpack  前端  npm  vue.js  

NodeJs篇

一、下载安装nodeJS

1、下载地址官方网址 NodeJs

image-20220505233519766

2、下载完成后,双击“node-v11.5.0-x64.msi”,开始安装Node.js,一路next,注意:安装目录看自己需求,本人安装在D:\nodejs目录下

3、测试

  • 键盘按下【win+R】键,输入cmd 回车
  • 输入命令node -v 和 npm -v

注意:新版的nodejs自带npm,可以理解npm就是对nodejs进行包管理,用于卸载和安装nodejs需要的东西

image-20220505234126788

4、在安装目录文件夹下创建node_cache 和 node_global

image-20220506085159936

5、管理员身份打开cmd命令行

这里是为了设置npm全局安装的模块路径和缓存路径

npm	config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

二、配置环境变量

1、win10&win11:右键此电脑——属性——高级系统设置——高级——环境变量

image-20220506085632830

2、创建 NODE_PATH 变量image-20220506085924618

3、在 系统变量中 选择 Path 添加如下属性

image-20220506090148246

image-20220506090218198

4、测试

安装全局的vue框架和vue-cli脚手架

npm install vue -g
npm install vue-cli -g 

image-20220506092045816

推荐安装还有一些没列出来例如webpack等,留给大家去以后探索

  • cnpm 国内npm服务器,访问速度快
  • rimraf 用来快速删除文件和文件夹
  • nrm 一个 npm 源管理器,允许你快速地在 npm源间切换
  • vite 前端开发和构建工具(就是快!)
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g rimraf
npm install -g nrm
npm install -g vite

Vscode篇

一、下载

image-20220506150755069

  • 选择对应的版本

二、安装

1、点击下载好的.exe文件

image-20220506150928707

2、一路下一步到安装目录

image-20220506151003248

3、一路下一步到配置选项

image-20220506151046656

4、安装完成!

三、初始化配置

1、下载好的vsCode,任何插件都没有,下面说说我的一些前端常用配置插件,欢迎补充说明

2、名称: Chinese (Simplified) (简体中文) :这个插件是汉化的

image-20220506152622575

3、Live Server:右键能够模拟服务器运行代码

image-20220506152651841

4、open in browser:右键能够点击open in browser然后自动跳转浏览器运行代码(快捷键Alt+B)

image-20220506152706902

5、Path Intellisense:这个插件是自动补全路径的,输入\后会弹出路径

image-20220506152839086

6、Prettier - Code formatter:这个插件是代码格式化插件,但是要进行一些相应的配置,来约束代码的规范,下面的一份是我觉得很好用的配置项:

{
    
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按       shift+alt+F
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // 换行属性
  "prettier.printWidth": 100,
  // 箭头函数参数括号 avoid 能不加时就不加
  "prettier.arrowParens": "avoid",
  // #prettier去掉代码结尾的分号
  "prettier.semi": false,
  // 无尾逗号
  "prettier.trailingComma": "none",
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    
    "js-beautify-html": {
    
      // 多行属性
      // "wrap_attributes": "auto"  // 当超出长度范围时才换行
      "wrap_attributes": "force-expand-multiline" // 所有属性强制换行对齐
    },
  },
  "prettier.useTabs": true,
  "[javascript]": {
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    
    "editor.defaultFormatter": "octref.vetur"
  },
  "[html]": {
    
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "window.zoomLevel": 1,
  "security.workspace.trust.enabled": false,
  "workbench.colorTheme": "Monokai"
}

7、Vetur:这个插件是识别vue项目文件的,如果没有这个插件,vue文件是无法识别的

image-20220506153004888

8、vscode-icons:这个插件是给对应的文件加上相应的字体图标的,看起来更加美观image-20220506153012800

安装好上述的环境后,前端的基本环境就搭建完了,现在来进行实战测试。测试一个vue项目

实战篇

1、打开cmd命令行,输入命令

vue init webpack my_project

配置如下

image-20220506154412008
image-20220506154627397

2、启动vue项目

image-20220506154759786

3、启动成功 访问8080端口

image-20220506154842469

4、结束

image-20220506154912783

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Th_rob/article/details/124612087

智能推荐

东周科目三考场5号线_全国科目三考场考试视频视频教程方法秘籍攻略步骤及注意事项技巧!...-程序员宅基地

文章浏览阅读4.8k次。全国科目三考场考试视频教程教学专业讲解语音实地视频讲解专业收费版实地考场讲解语音高清流畅,绝非免费版可比,助你考试一把过!路考16项,项目多细节全。比科目二的难度有过之而无不及,稍不注意就直扣100分。很多学员考完科三都是一身的汗,因为必须绷紧了神经才能保证所有的细节不会出错。要是小问题出错,技术再牛也白搭。考前多看几遍视频牢记要点!助你考试一把过!科目三考场考试视频教程教学专业讲解语音..._深圳驾考科目三东周考场

UDS简介-程序员宅基地

文章浏览阅读366次。UDS简介

【mmdet3d配置】win11+Debian子系统_win11 debian-程序员宅基地

文章浏览阅读1k次。mmdet3d +win11+Debian子系统不想安装双系统,又馋windows的UI,还需要linux的生产力,毕竟很多代码暂时只支持linux。所以就有了这篇文章~_win11 debian

Environment.Exit(0)和Environment.Exit()方法-程序员宅基地

文章浏览阅读1.5w次,点赞5次,收藏17次。net强制退出主窗口的方法——Application.Exit()方法和Environment.Exit(0)方法2009年04月09日 23:59:00 fengloveyun 阅读数:1470.net强制退出主窗口的方法——Application.Exit()方法和Environment.Exit(0)方法.net类库已经帮助我们实现了窗口的关闭,如果此窗口是系统的主窗口,关闭此窗口即应..._environment.exit

JAVA中十四种常见开发工具及其特点-程序员宅基地

文章浏览阅读125次。1、JDK (Java Development Kit)Java开发工具集 SUN的Java不仅提了一个丰富的语言和运行环境,而且还提了一个免费的Java开发工具集(JDK)。开发人员和最终用户可以利用这个工具来开发java程序。  JDK简单易学,可以通过任何文本编辑器(如:Windows 记事本、UltrEdit、Editplus、FrontPage以及dreamweaver..._五种java开发工具的使用现状和特点

解决XP下鼠标单击变双击的问题_xp鼠标自动双击-程序员宅基地

文章浏览阅读2.1k次。我的光电鼠标,按左键经常出现单击变双击的情况,有时写Blog的时候,在浏览器的多窗口切换时,老是因为这个问题把辛辛苦苦写的内容就这么关闭,非常郁闷。虽然可以通过外接鼠标解决问题,但有时候毕竟不是那么方便。记得曾经见过某个软件能解决这个问题,今天找了下,果然找到了,还是cnbeta出品的。DoubleClickFix是一个鼠标双击修正工具,对于旧鼠标特别有效果。下面是这个软件的介绍:用久了都会出_xp鼠标自动双击

随便推点

雨流法工具箱rainflow进行疲劳分析教程(含雨流法rainflow工具箱下载及安装教程)_matlab中rainflow函数-程序员宅基地

文章浏览阅读6.5k次,点赞4次,收藏23次。雨流计数法又可称为“塔顶法”,是20世纪50年代由英国的Matsuiski和Endo 两位工程师提出的, 距今已有50 多年。雨流计数法主要用于工程界, 特别在疲劳寿命计算中运用非常广泛。把应变-时间历程数据记录转过90°,时间坐标轴竖直向下, 数据记录犹如一系列屋面, 雨水顺着屋面往下流, 故称为雨流计数法。雨流计数法对载荷的时间历程进行计数的过程反映了材料的记忆特性,具有明确的力学概念,因此该..._matlab中rainflow函数

vscode中python自定义包的模块如何导入其子包模块_vscode使用python导入自定义模块-程序员宅基地

文章浏览阅读3.2k次。本文在个人博客的链接问题描述如图所示,对于python,有一个自定义包parent,它里面还有一个子包child,当你在parent.module1中import child.module2时,vscode会给你报错,说找不到这个包。当你单独运行module1.py的时候,可以正常运行,但是当你在parent包外层的main.py中import parent.module1时,就会报错。详细说明目录结构为:main.pyparent__init__.pymodule1.py_vscode使用python导入自定义模块

flume学习01-flume介绍_根据指导书学习flume的使用,可以采用不同的flume数据源,学会flume的配置要求不能-程序员宅基地

文章浏览阅读396次。最近学习了下flume的使用,以配合公司将日志系统独立出来的开发,官网用户手册:http://flume.apache.org/FlumeUserGuide.htmlflume架构a. 组件先搬上官网上的架构图从图上可以看到flume的事件定义成了一个数据流,一个数据流组成了Agent,其实就是JVM实例,每个Agent包含三个组件:Source_根据指导书学习flume的使用,可以采用不同的flume数据源,学会flume的配置要求不能

Github上一款一键生成数据库文档的大利器!_github 支持达梦数据库生成表结构文档-程序员宅基地

文章浏览阅读3.1k次,点赞16次,收藏91次。文章目录介绍快速开始表结构脚本基于 Java 代码引入 screw 及相关依赖代码编写基于 Maven 插件引入screw及相关依赖配置maven-plugins手动执行生成数据库文档成品地址介绍今天看了 Guide老哥 公众号(需要的朋友可以关注一波: JavaGuide)中的一篇文章,发现了一款好用的数据库文档生成工具。在项目中开发中,有没有遇到过编写数据库说明文档。一般情况下,数据库说明文档中有着大量的数据库表结构,如果手动进行维护,将会耗费大量时间,这样就不能愉快的进行摸鱼了。所以呢,为了解_github 支持达梦数据库生成表结构文档

充电器pps功能是什么_倍思18W快充充电器拆解,这套快充方案天猫精灵充电器都在用...-程序员宅基地

文章浏览阅读599次。最近我们拿到Baseus倍思18W USB PD快充充电器,这款产品机身光滑,棱边圆润,除了支持18W功率充电器里常规三组固定电压档位外,还支持两组PPS电压档位,能够很好的支持18W以下用电设备,此外最大18W PD快充功率也能满足iPhone11等智能手机的日常充电。下面我们就和大家分享这款产品的拆解,看看其内部用料如何。一、倍思18W PD充电器外观倍思典型的黄白配色包装盒,包装盒上端带有挂..._快充 pps

python web服务器性能,pythonwebserver服务器性能对比-程序员宅基地

文章浏览阅读339次。因为换了nginx就不再使用mod_wsgi来跑web.py应用了,现在用的是gevent-wsgi,效果还不错。但还是想试试别的,比如传说中超级猛的meinheld什么的。 软硬件环境硬件:一台04年初购置的IBM X235服务器,CPU为Xeon 2.4G两颗,内存1G,100M网卡。软件:Ubuntu Server 10.04 LTSApache 2.2.14Nginx 0.7.65Pyth..._pywsgi 与 run 性能差异