1.Vue环境搭建（Node）

已于 2024-04-29 15:00:04 修改
阅读量1.5k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： 前端 node.js
于 2021-05-12 15:14:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45305209/article/details/116706748
版权

目录

Vue专栏目录（点击进入…）

Vue环境搭建（Node）

Node.js基本介绍

Node.js是一个可以让JavaScript运行在服务器端的平台。它是一个为实时Web应用开发而诞生的平台，它从诞生之初就充分考虑了在实时响应、超大规模数据要求下架构的可扩展性。这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路，而采用了单线程、异步I/O、事件驱动式的程序设计模式，其轻量又高效（基于Chrome V8引擎的JavaScript运行环境）

（1）Node.js是一个基于Chrome V8引擎的JavaScript运行环境
（2）Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效
（3）Node.js的包管理器npm，是全球最大的开源库生态系统


Node.js能做什么？

（1）具有复杂逻辑的网站
（2）基于社交网络的大规模Web应用
（3）Web Socket服务器
（4）TCP/UDP套接字应用程序
（5）命令行工具
（6）交互式终端程序
（7）带有图形用户界面的本地应用程序
（8）单元测试工具
（9）客户端JavaScript编译器
（10）Node.js内建了HTTP服务器支持，也就是说可以轻而易举地实现一个网站和服务器的组合

Node.js异步I/O与事件驱动

Node.js最大的特点就是采用异步式I/O与事件驱动的架构设计。传统高并发架构方案是多线程模式，Node.js使用的是单线程模型，对于所有I/O都采用异步式的请求方式，避免了频繁的上下文切换。Node.js在执行的过程中会维护一个事件队列，程序在执行时进入事件循环等待下一个事件到来，每个异步式I/O请求完成后会被推送到事件队列，等待程序进程进行处理

Node.js异步机制：基于事件的，所有的磁盘I/O、网络通信、数据库查询都以非阻塞的方式请求，返回的结果由事件循环来处理
Node.js事件驱动：Node.js进程在同一时刻只会处理一个事件，完成后立即进入事件循环检查并处理后面的事件。这样做的好处是，CPU和内存在同一时间集中处理一件事，同时尽可能让耗时的I/O操作并行执行。对于低速连接攻击，Node.js只是在事件队列中增加请求，等待操作系统的回应，因而不会有任何多线程开销，很大程度上可以提高Web应用的健壮性，防止恶意攻击


Node.js性能

Node.js用异步式I/O和事件驱动代替多线程，带来了可观的性能提升。Node.js除了使用V8作为JavaScript引擎以外，还使用了高效的libev和libeio库支持事件驱动和异步式 I/O


相关名词介绍

（1）JavaScript

JavaScript是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成的，而Mozilla则指出JavaScript由Core JavaScript和Client JavaScript组成的。
Node.js中的JavaScript只是Core JavaScript，或者说是ECMAScript的一个实现，不包含DOM、BOM或者Client JavaScript，这是因为Node.js不运行在浏览器中，所以不需要使用浏览器中的许多特性


（2）V8引擎

Node.js的JavaScript引擎是V8，来自Google Chrome项目。 V8号称是目前世界上最快的JavaScript 引擎，经历了数次引擎革命，它的JIT（Just-in-time Compilation，即时编译）执行速度已经快到了接近本地代码的执行速度。 Node.js 不运行在浏览器中，所以也就不存在JavaScript的浏览器兼容性问题，可以放心地使用JavaScript语言的所有特性


npm（包管理器，★）

npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器（类似Maven）
npm初衷：JavaScript开发人员更容易分享和重用代码。
npm的使用场景：
（1）允许用户获取第三方包并使用
（2）允许用户将自己编写的包或命令行程序进行发布分享
npm版本查询：npm -v

Node.js有着强大而灵活的包管理器（node package manager，npm），全球最大的开源库生态系统。目前已经有上万个第三方模块，其中有网站开发框架，有MySQL、PostgreSQL、MongoDB数据库接口，有模板语言解析、CSS生成工具、邮件、加密、图形、调试支持，甚至还有图形用户界面和操作系统API工具

Node.js可以作为服务器向用户提供服务，与PHP、Python、Ruby on Rails相比，它跳过了Apache、Nginx等HTTP服务器，直接面向前端开发。Node.js的许多设计理念与经典架构（如LAMP）有着很大的不同，可提供强大的伸缩能力


webpack（模块打包，，★）

WebPack可以看做是模块打包机：它做的事情是，分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用


CommonJS规范

CommonJS定义了一套普通应用程序使用的API，从而填补JavaScript标准库过于简单的不足。

CommonJS规范包括了模块（modules）、包（packages）、系统（system）、二进制（binary）、控制台（console）、编码（encodings）、文件系统（filesystems）、套接字（sockets）、单元测试（unit testing）等部分


安装Node.js、Vue环境（★）

官网下载：http://nodejs.cn/download/

注意：node的版本，只有支持和谐模式的node才会支持es6, 在基于webpack构建项目名称时才不会报错。推荐最新版本

下载后直接安装
在这里插入图片描述
之后都选择安装地址之后，都选择默认即可


（1）设置nodejs prefix（全局）和cache（缓存）路径

在nodejs安装路径下，新建node_global和node_cache两个文件夹
在这里插入图片描述

①设置系统环境变量

设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
此电脑 --> 属性 --> 高级系统设置 --> 环境变量
在这里插入图片描述

在系统变量中新建（NODE_PATH）及其配置（Path）

环境变量配置项
PathE:\Mysoftware\Node\
E:\Mysoftware\Node\node_global
NODE_PATHE:\Mysoftware\Node\node_global\node_modules

在这里插入图片描述

配置Path
在这里插入图片描述

②设置缓存文件夹

npm config set cache "E:/Mysoftware/Node/node_cache"

③设置全局模块存放路径

npm config set prefix "E:/Mysoftware/Node/node_global"

设置成功，之后用命令npm install XXX -g安装以后模块就在E:/Mysoftware/Node/node_global


（2）基于Node.js安装cnpm（淘宝镜像）

（类似于阿里云的maven中央仓库镜像）

# 已过期
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 新的地址
npm install -g cnpm --registry=https://registry.npmmirror.com

验证命令：cnpm -v


安装webpack

npm/cnpm install webpack --save-dev

解决WebStrom构建项目缓慢

虽然设置过淘宝镜像：

npm install-g cnpm --registry=https://registry.npm.taobao.org

但是通过vue init webpack projectName新建项目是和淘宝镜像没关系的，因为vue-cli用的是npm源，所以只要设置npm源就行了，可以提升创建速度：

步骤一：

npm cache clean

步骤二：

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

在使用vue cli搭建项目的时候，输入vue init webpack vue_project_demo。一直显示-download template，老是在哪转圈圈下载模板。
有一个小技巧，执行下列命令安装webpack包（没有安装cnpm可以自行安装哟，npm安装很慢的哟）

cpnm install --save-dev webpack

下载安装成功后（大概几秒钟），再重新执行vue init webpack vue_project_demo，就会发现下载模板飞速


（3）安装Vue

cnpm install vue -g --registry=https://registry.npm.taobao.org

（4）安装vue-cli脚手架

安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g --registry=https://registry.npm.taobao.org

（5）检测是否安装成功

node -v
npm -v
vue -V
cnpm -v

（6）WebStrom安装Vue.js插件

点击Preferences进入WebStorm的配置页面，然后点击Plugins设置插件。
点击Browse Repositories按钮（第二个）浏览插件仓库，搜索Vue.js插件进行安装
在这里插入图片描述


（7）配置Vue模板

点击Preferences进入WebStorm的配置页面，按下图层级进入File and Code Templates，即文件模板配置
按照最新WebStorm对Vue模板的设置，可以写为：

<template>
	#[[$END$]]#
</template>

<script>
export default {
	name: "${KEBAB_CASE_NAME}"
}
</script>

<style scoped>
</style>

在这里插入图片描述
配置好之后，点击Apply或OK即可保存模板，下一次创建Vue文件时，不需要新建file，而可以直接新建Vue文件

未禾
关注
专栏目录
Vue，Nodejs环境搭建
Kevin
12-03 244
1、找到官方二进制包，下载 : https://nodejs.org/en/download/ 我这里是centos的linux环境 2、安装 # 先做软链接 [root@cicd local]# ln -s /usr/local/node/bin/npm /usr/local/bin/npm [root@cicd local]# ln -s node-v14.15.1-linux-x64/bin/node /usr/local/bin/node # 再做一个本地软链接 [root@cicd local
超简单的Vue.js环境搭建教程
12-04
1.要使用vue来开发前端框架，首先要有环境，这个环境要借助于node，所以要先安装node，借助于node里面的npm来安装需要的依赖等等。 这里有一个小技巧：如果在cmd中直接使用npm来安装的一些工具的话会比较慢，所以...
Vue 组件基础
JmuziA的博客
12-17 350
VUE 一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下： Vetur —— 语法高亮、智能感知、Emmet等 EsLint—— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 Path Intellisense —— 自动路劲补全 HTML CS...
Vue和Nodejs
m0_58380757的博客
08-06 845
vue和Nodejs
vue学习日记day-1（安装node和vue）
最新发布
emmmeat的博客
08-02 1549
记录前端学习第一天，今天进行了node安装配置和vue安装配置
vue使用node的入门
dianpi2993的博客
05-09 167
1、安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 验证是否安装 cnpm -v 2、安装vue cnpm install -g vue-cli 检验是否安装 vue 3、创建一个基于"webpack"模板的新项目 vue init...
node.js 快速搭建vue项目
热门推荐
duanaibing3017的博客
04-06 1万+
首先下载node.js安装并且配置好环境变量。去nodejs官网下载即可，地址：http://nodejs.cn/中文网前提要安装 以下：    1）安装vue淘宝镜像         npm install -g cnpm --registry=https://registry.npm.taobao.org    2）安装webpack         npm install webpack -...
vue nodejs环境搭建
m0_57013583的博客
01-24 666
nodejs安装与环境搭建： 1.安装 node下载 下载后安装一直不需要改变路径就一直next即可，最后finish 2.环境搭建 在node下载的文件夹里面新建两个文件 node_cache node_global 创建完两个空文件夹之后，widow+R打开cmd命令窗口，输入 npm config set prefix "你创建node_global文件路径" 在文件夹复制就好 npm config set cache "你创建node_cache 文件路径" 在文件夹复制就好 3.关键一
在vue中使用node.js
weixin_46263815的博客
09-22 5982
在vue中，使用node.js的框架express 和mongodb数据库 来进行增删改查的页面交互。
vue环境搭建
可乐大牛的博客
02-22 418
1、安装node 官网地址：https://nodejs.org/en/download/ 下载完了之后，都是默认配置就好了 2、设置nodejs prefix（全局）和cache（缓存）路径 在nodejs安装路径下，新建node_global和node_cache两个文件夹 设置缓存文件夹 注：npm config set会在C:\Users\用户目录下生成一个.npmrc的文件 npm config set cache "G:\nodejs\node_cache" 设置全局模块存放路
vue-cli4.x环境搭建
01-08
在开始搭建 Vue CLI 4.x 环境之前，首先确保已安装 Node.js。你可以通过在终端运行 `node -v` 来检查当前的 Node.js 版本。推荐使用稳定版的 Node.js，例如 v12.13.0。Vue CLI 是基于 Node.js 的，所以需要先安装它...
Node.js-通过node-vue-MongoDB构建项目从构建到服务器部署
08-09
在Node.js环境中，Lass可以通过Webpack进行编译，与Vue.js的单文件组件（Single File Components）很好地融合。 Node.js是基于Chrome V8引擎的JavaScript运行环境，它允许我们在服务器端执行JavaScript代码。...
前端环境搭建+node.js+vue+vscode
08-21
前端环境搭建+node.js+vue+vscode 在本资源中，我们将学习如何搭建一个完整的前端环境，包括安装 Node.js、cnpm、浏览器、VSCode 和 Vue.js 等工具。 Node.js 的安装 Node.js 是一个基于 Chrome V8 JavaScript ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未禾

您的支持是我最宝贵的财富！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值