IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> NodeJS开发环境搭建 -> 正文阅读

[JavaScript知识库]NodeJS开发环境搭建

下载安装node.js

官方下载地址: https://nodejs.org/en/ 下载LTS版本(长期稳定版本)

在这里插入图片描述

安装CNPM 包管理工具

安装命令:  npm install -g cnpm --registry=https://registry.npm.taobao.org
	npm是node官方的包管理器。cnpm是个中国版的npm,是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。
	手动配置环境变量:
	win10: 桌面 -> 单机右键 ->  属性 -> 高级系统设置 参考下图:
	检验: cnpm -v

安装yarn 包管理工具

安装命令:  npm install yarn -g
	Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。
	检验: yarn -v

配置环境变量

Nodejs安装目录下创建node_global和node_cache两个空文件夹(缓存目录修改)
在这里插入图片描述
创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix “G:\nodejs\node_global”
npm config set cache “G:\nodejs\node_cache”
检验: 查看npm默认安装路径 npm config get prefix 和 npm config get cache

系统变量下新建NODE_PATH,输入G:\nodejs\node_global\node_modules
将用户变量下的Path修改为G:\nodejs\node_global
在这里插入图片描述
安装个最常用的express模块,使用npm安装个模块测试下

npm install express -g

配置淘宝npm镜像

cmd命令行:

npm config set registry https://registry.npm.taobao.org

安装vue

(vue脚手架不同版本的区别和介绍_一位前行者的博客-CSDN博客_vue脚手架和vue的区别)
npm install vue -g

安装vue-cli脚手架

2.9.6版本的安装:npm install -g vue-cli
3.0.0版本的安装:npm install -g @vue/cli
检验vue: vue -V
卸载方法:npm uninstall vue-cli -g(卸载)

安装webpack

PS:不要忘记webpack4.+开始webpack-cli是必备的哦 版本号一定要对应

npm install --g webpack@4.44.2 webpack-dev-server@3.11.2 webpack-cli@3.3.12
校验:webpack -v

创建vue项目测试(这里的版本号是指脚手架的版本号)

2.9.6 初始化项目是用 vue init webpack my-project  
3.0.0 以上初始化项目是用 vue create my-project
打开cmd窗口,进入指定文件夹,输入初始化项目语句…
? Project name my-project      项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。 
? Project description A Vue.js project      项目描述,如果不需要就直接回车
? Author uplyw <xxx@xxx.com>      项目作者,默认计算机用户名
? Vue build standalone      构建方式(这里推荐使用1选项,适合大多数用户的)
? Install vue-router? Yes      安装vue的路由插件
? Use ESLint to lint your code? No      是否使用ESLint检测你的代码
Pick an ESLint preset:选择分支风格
  选项有三个
  1.standard(https://github.com/feross/standard) js的标准风格
  2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
  3.none (configure it yourself) 自己配置
? Set up unit tests No      是否安装单元测试
? Setup e2e tests with Nightwatch? No      是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
? Should we run `npm install` for you after the project has been created? (recommended) npm      项目创建后是否要为你运行“npm install”?这里选择包管理工具
运行项目输入网址,访问成功说明环境搭建成功~

在这里插入图片描述

问题和解决方法

问题
在这里插入图片描述
解决方法

1、搜索powershell,右键以管理员身份运行
2、若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本,请使用以下命令将计算机上的 执行策略更改为 RemoteSigned
执行:set-ExecutionPolicy RemoteSigned

问题
在这里插入图片描述
解决方法
cmd命令行切换到工程根目录下运行:npm run serve 或 npm run dev (根据项目根目录下package.json内"scripts"字段决定)

问题
在这里插入图片描述
问题原因:
在配置文件中的服务器名称和你启动命令中的名称不匹配。

解决方法:
查看配置文件package.json 中服务器名称,并修改启动命令。
在这里插入图片描述
将启动命令中服务器名称换为对应名称:
npm run start

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-14 23:43:36  更:2022-04-14 23:47:57 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 3:10:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码