前言

1. 什么是Node.js?

Node（或者说 Node.js，两者是等价的）是 JavaScript 的一种运行环境。在此之前，我们知道 JavaScript ，都是在浏览器中执行的，用于给网页添加各种动态效果，那么可以说浏览器也是 JavaScript ，的运行环境。那么这两个运行环境有哪些差异呢？请看下图：

简而言之，Node 为我们提供了一个无需依赖浏览器、能够直接与操作系统进行交互的 JavaScript 代码运行环境！

首先，Node.js和Vue都是JavaScript的运行环境和框架，它们都使用JavaScript语言进行开发。因此，对于前端工程师而言，学习和掌握Node.js和Vue是非常必要的。Node.js可以帮助前端工程师自己构建一些简单的应用，而Vue则可以帮助前端工程师更好地组织代码并提高开发效率。
其次，Node.js和Vue可以配合使用，使得开发更加高效。Node.js可以作为后端服务器，向Vue提供数据接口，Vue再将数据渲染到前端页面上。这样可以将前端和后端分离开来，方便维护和开发。同时，使用Node.js可以轻松地搭建一个本地的开发环境，利用Vue进行前端开发。
再次，Node.js和Vue都有着丰富的插件和组件库，对于开发者而言，使用起来都非常方便。Node.js的npm包管理器可以方便地获取各种插件和模块，而Vue的组件库和插件也互相配合，可以方便地搭建各种样式的页面。
总之，Node.js和Vue之间的关系非常密切，对于前端开发人员而言，掌握这两个技能是非常必要的。Node.js可以作为后端API提供数据支持，这样可以方便地构建一个完整的应用程序。Vue与其密切的关系则保证了很好的用户体验，能够帮助开发者提高开发效率。

传送门：理解 Node.js和Vue之间存在什么关系

一、vue 简介：

vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64

1、npm简介

NPM 的全称是 Node Package Manager，是随同 Node.js 一起安装的包管理和分发工具，它可以很方便的让前端开发者下载、安装、上传以及管理已经安装的包。

官网链接：
http://nodejs.cn/download/

按照下图选择：一般都是64位，32位很少见了

msi 安装很方便的，和软件下载安装包一样，去安装node.js

下载完成后，双击安装包，开始安装，一直点 next 即可，安装路径默认在C:\Program Files下，也可以自定义修改。刚开始还是先按默认路径安装。

这里就不贴安装细节图了，后面都可以手动更改，也比较推荐手动更改(Window10 手动更改安装路径，需要自己添加 node.js 路径，比如 E:\TEST\node.js\，因为如果是想要自定义安装路径，那么需要自己添加 node.js 路径。 )，不然还不知会不会出什么bug。

检测方式：cmd命令窗口输入 node -v 回车，能正常显示npm版本。

2、cnpm 简介

1.国内使用npm存在的问题

• 安装npm后，每次我们安装包时，我们的电脑都要和npm服务器进行对话，去npm仓库获取包。
• 因为npm的远程服务器在国外，所以有时候难免出现访问过慢，甚至无法访问的情况。

为了解决这个问题，可以使用淘宝的cnpm代替npm:

淘宝为我们搭建了一个国内的npm服务器，它目前是每隔10分钟将国外 npm 仓库的所有内容“搬运”回国内的服务器上，这样我们直接访问淘宝的国内服务器就可以了，它的地址是：https://registry.npm.taobao.org

cnpm 是国内的 npm 工具，Chinese npm

参考链接：

cnpm的简介与使用

cnpm常用命令

npm 和 cnpm 的区别

二、设置node的全局和缓存路径

手动创建node.js的全局和缓存路径目录

在安装目录中，比如我的默认node.js的安装路径是：C:\Program Files\nodejs，那么就在这个路径下新建两个文件夹，分别是：node_cache（缓存）、node_global（全局）

Windows命令行配置node.js的全局和缓存路径

npm config set cache "C:\Program Files\nodejs\node_cache"

npm config set prefix "C:\Program Files\nodejs\node_global"

使用快捷键 win + r 后，输入 cmd ，然后打开命令行终端，接着输入上面两条指令，
npm 命令在node.js的目录下，在安装的时候，已经自动配置好系统环境变量了。如上图的新建文件图中，可以看到npm命令。

三、安装 Vue 框架

1、提升安装 Vue 框架速度的方法

想要安装Vue框架，自然就得下载，但是呢，如果想要更快的安装好 Vue 框架，那么接下来的操作，就必不可少了。

1.1、设置淘宝镜像，提升 npm 工具下载速度

以管理员身份打开命令提示符窗口 -->

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

1.2、个人建议

前面已经下载了 cnpm 工具，那么后面所有的 npm 命令其实都是可以替换为 cnpm 命令，本质上 cnpm 就是 npm 命令，只是速度不同罢了，所以最好的是使用 cnpm 命令来代替 npm 命令。这里笔者，就不费时间修改下面的命令了，因为两种都是可以的，请自行选择。

2、手动配置系统环境变量 PATH

设置环境变量的目的在于：在任何目录都可以执行node和vue命令

在环境变量中，Path里面新增一个global文件夹的路径，如：C:\Program Files\nodejs\node_global

这个配置是 vue 框架的全局命令路径，后面就可以使用 vue 命令了。

同时新增一个环境变量：NODE_PATH，路径为node.js目录下的modules文件夹。

这个配置是 node.js 的全局命令路径，在终端可使用 npm 命令。

3、正式安装 Vue 框架及 Vue 脚手架

1、安装 Vue 框架

需要先关掉当前的命令行窗口（cmd窗口），并再次打开cmd（命令行窗口）执行安装vue的命令（以管理员身份运行命令行新窗口，否则报 permitted 权限问题）

cnpm install vue -g

然后等待 vue 框架下载完成。

2、安装 Vue-cli 脚手架

vue-cli是官方脚手架工具，能迅速帮你搭建起vue项目的框架

特别注意：

3.x 以下版本的 vue 脚手架是 vue-cli ，即 [ 0, 3.0)
3.x 以上版本的 vue 脚手架是 @vue/cli，即 [ 3.0 ，5.x ]

在 Windows 终端执行下面命令：1

cnpm install -g vue@cli

如果出现红色字体报错信息，那么就改为分别输入下面的指令：

npm i npm -gnpm i @vue/cli -gcnpm i @vue/cli -g

i —— install
-g —— global  全局安装

参考链接：

不同版本vue-cli区别 详解

3、查看 vue 版本和 vue 脚手架版本

npm list vue -g

vue --versionvue -V

4、vue create 默认创建 Vue 项目

创建 Vue 项目，可以在指定路径下创建，而下面的命令是默认在当前路径下创建。

vue create testvue

选择 Default ([Vue 3] babel, eslint)，并回车

当创建好 Vue 项目后，在 Widnows 终端 cd 找到该 Vue 项目的路径，在 Windows 终端启动 Vue 项目。

cd testvuenpm run serve

5、访问已测试是否创建运行成功

http://localhost:8080/

6、查看项目的 Vue 框架版本，方便以后版本升级

找到项目路径，打开项目内的 package.json 文件，找到 dependencies ，可以看到 vue 框架版本为 3.x 版本

四、详解创建项目的两个命令方法 vue init webpack 和 vue create

1、vue init webpack 和 vue create 的区别

1.1、vue init webpack

是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目

webpack是官方推荐的标准模板名，启动方式默认为 npm run dev

使用方式：

vue init webpack 项目名称

比如electron-vue 模板的使用方式：

vue init simulatedgreg/electron-vue 项目名称

1.2、vue create

是vue-cli3.x的初始化方式，模板是固定的，模板选项可自由配置，启动方式默认为 npm run serve

使用方式：

vue create 项目名称

2、关于 vue init webpack 创建 vue 项目需要注意的几点

1、Vue build (Use arrow keys)

Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

两个选项，新手比较推荐 Runtime + Compiler

参考链接：
Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别

对Vue中 runtime-compiler 和 runtime-only 两种模式的理解

2、Install vue-router? (Y/n) 选择 y，我们须要它来做前端路由

3、 Use ESLint to lint your code? (Y/n) 不选择Eslint，输入 n

4、Set up unit tests (Y/n) ，输入 y

5、Pick a test runner? 直接回车即可

6、Setup e2e tests with Nightwatch? (Y/n) 不选择 Nightwatch ，输入 no；

7、Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)，直接回车，用 npm 下载安装相关项目文件。

等待下载安装项目基本配置文件

参考链接：

vue 关闭vue项目中烦死人的ESlint

Vue前端代码添加单元测试Unit Test

vue-cli 自动化测试 Nightwatch 详解 原创

3、关于 vue create 创建 vue 项目需要注意的几点

3.1、默认创建 (Default) Vue 2 、Vue 3 项目

第一个选项是选择默认和手动创建的选项，如果想要快速创建那么选择默认的两个选项创建，但是要决定好哪个版本，如 Vue 2.x 或 Vue 3.x。


看到 Eslint 了吗？之前 vue init webpack 命令，就取消了 Eslint 的安装，所以自行决定。

如果不需要太多功能的话可以选择快速创建。选择第一个直接回车，进行项目创建

cmd窗口输入命令 cd testvue 回车进入 testvue 项目中，再输入 npm run serve 回车启动服务

3.2、手动创建 Vue 项目

选择第三个回车（键盘上下键选择）

选择自己需要的特性（上下键移动键，空格键是否选中，a 键切换选择所有，i 键反转选择选项），然后回车

( ) Babel                      // 支持高阶语法转换( ) TypeScript              // 支持使用 TypeScript 书写源码( ) Progressive Web App (PWA) Support  // 支持PWA( ) Router                           // 路由( ) Vuex                           // store( ) CSS Pre-processors           // CSS 预处理器( ) Linter / Formatter         // 代码风格检查和格式化( ) Unit Testing             // 支持单元测试( ) E2E Testing            // 支持E2E测试

本次我们选择：Babel，Router，Vuex，CSS Pre-processors。

至于代码格式化，现在的IDE开发工具中都有格式化插件，无需另行下载。

这里选择 vue 框架版本 2.x，注意不要选 3.x，不要选 3.x 的vue（在笔者看来，Vue 3 的资料会比较少，而且稍微比 Vue 2 不稳定些，下图我就不修改了，自行选择 Vue 2.x）

这一步提示我们是否使用历史路由器，输入 n ，回车

这一步提示我们在项目里面需要支持何种动态样式语言（这里的样式语言，其实就是 CSS 变种，相当于是在 vue 项目里面弄 <style></style> 这样的标签，只不过语法会与 CSS 语言有些区别），这里没啥好选的，第一个直接回车

这一步提示我们选择配置文件的位置，因为每个插件都有自己单独的配置文件，我们选择第一个，回车

这一步提示我们是否将当前配置选项保存起来，方便下次创建项目时使用。输入 n ，回车

下载依赖包，创建项目，等待安装完成


按命令，启动项目，这里就不贴图了。

创建好的项目结构图：

五、vue 项目的图形化界面创建

还没弄

六、Vue 框架脚手架版本的替换方法

1、3.0以下切换至3.0以上

//卸载当前vue
npm uninstall -g vue-cli
//安装vue 3.x
npm install -g @vue/cli
//如果上面代码报错，则执行以下代码
//以下代码进行更新操作
npm i npm -g
npm i @vue/cli -g
cnpm i @vue/cli -g

2、 3.0以上切换回3.0以下

//卸载当前vue 3.x 版本
npm uninstall -g @vue/cli
//安装vue 2.x 版本
npm install -g vue-cli  npm i vue-cli -g
cnpm i vue-cli -g

---

七、Node 与 Vue 脚手架的个人理解

Node 可以理解为是一个基本的虚拟环境，各种其他的包或依赖都可以下载到这个环境内，比如，要安装 vue 脚手架，需要通过 Node 的 npm 命令来下载安装。
在笔者看来，这真的有点类似 Java 的虚拟机 Jvm 运行 Java 语言，而 Node 则是用来运行 JavaScript 前端语言，而不是在浏览器上运行 JavaScript 前端语言，即不需要打开浏览器，也可以运行 JavaScript ，当然这里的 Node 最多都是起一个后端数据 API 接口的作用，即作为服务端程序，给前端程序提供数据，前端再加以渲染获取到的新数据更新到界面，完成前后端交互。

那么在这里的 VUE 脚手架的作用，就可以知道，其实这些 VUE 脚手架统统都是用 JavaScript 语言开发的，所以用到的 webpack 等等的打包工具依赖什么的，最后都会被使用JavaScript 进行打包，默认的输出文件目录名，一般是 dist 目录

题外：理解 Vue 2.x 和 3.x 的区别

链接：
1. vue3.0和vue2.0的区别是什么？

2. VUE2.0和VUE3.0的区别

3. 浅谈vue-cli 3 和 vue-cli 2的区别！！！

4. vue run dev报错 缺少package.json文件、missing dev 命令 解决办法

参考链接

1. Node环境和Vue脚手架的搭建（详细教程）

2. 一、windows下搭建vue开发环境（nodejs部分）

3. windows下Vue安装教程（超级详细，一些细节坑）

4. 在Windows下搭建Vue开发环境

5. 【vue】创建项目之vue init 和 vue create的区别

6. 使用vue创建项目的详细步骤 - 命令创建两种，图形界面一种

npm 资料链接

1. npm命令大全

1. Windows 10 - Node与Vue - 安装 Vue 2.x 及 3.x 框架 - 项目创建要点相关推荐

1. Windows 10 Visual Studio 2017 安装配置 Apache Thrift （C++）

   最近需要使用Thrift,所以在网上看了很多资料,不过很多教程都不够详细完整,导致我花了不少时间安装配置.在这里我把我配置的过程写下来和大家分享. 1 介绍 Apache Thrift 是一个跨语言的 ...

2. ffmpeg添加到环境变量_如何在Windows 10上下载和安装FFmpeg

   如何在Windows 10上下载和安装FFmpeg FFmpeg是一种流行的开源工具,用于对音频和视频文件执行多项操作.这些操作包括多路复用,解复用,编码,解码,过滤,流式传输等. 它还用于缩放和旋转 ...

3. Windows 10下使用Anaconda安装TensorFlow1.8

   Windows 10下使用Anaconda安装TensorFlow1.8

4. 图计算库 igraph 在 windows 10 上的编译安装

   图计算库 igraph 在 windows 10 上的编译安装 参考:https://igraph.org/c/doc/igraph-Installation.html#igraph-Installa ...

5. PL2303HX在Windows 10下面不装安装驱动的解决办法(Code:10)

   Prolific在很早之前推出了一款名为PL2303HX的芯片, 用于USB转RS232, 这款芯片使用的范围非常广, 并且年代久远. 但是这款芯片因为用的特别多, 所以中国就有很多厂家生产了仿造的P ...

6. windows10用u盘安装LINUX,Windows 10下U盘安装 Ubuntu 17.10

   原标题:Windows 10下U盘安装 Ubuntu 17.10 1 Ubuntu 17.10 Canonical已经正式发布了Ubuntu 17.10 Artful Aardvark.该Ubuntu ...

7. node、npm、vue安装 -- VUE 项目 demo 实例

   前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 安装node: sudo yum install epel-release sudo yum ...

8. 基于Vmware player的Windows 10 IoT core + RaspberryPi2安装部署

   本文记录了基于Vmware Player安装Windows10和VS2015开发平台的过程,以及如何在RaspberryPi2.0上启动Windows10 IoT core系统,并通过一个简单的hel ...

9. 微软简化 Windows 10 上的 WSL 安装

   在 Windows 10 的最新内测版本中(Windows 10 Insider Preview Build 20150),微软为 WSL 的安装和内核升级新增了两个命令,分别是wsl.exe --i ...

最新文章

1. 虚拟机系统如何添加硬件？
2. pageX,clientX,offsetX,layerX的区别
3. GDCM：gdcm::MediaStorage的测试程序
4. java的this关键字理解
5. CS231n Convolutional Neural Networks for Visual Recognition------Scipy and MatplotlibTutorial
6. MVC教程第一篇：准备工作
7. 玩花花肠子做不成生意
8. xcode里面找不到头文件
9. tps5430应用电路详解_详解常用电阻的优缺点
10. 虚拟机的三种网络连接方式
11. costas环 matlab,数字Costas环的matlab仿真及其FPGA实现
12. 提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？ 小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？ 小程序支付如何实现
13. 能量原理与变分法笔记03:证明两点之间直线最短
14. 基于低代码开发平台实现的企业OA升级替换方案
15. 梅森公式的推导和探究
16. aac蓝牙编解码协议_【科普】蓝牙耳机主流编码格式（SBC、AAC、aptX）
17. 【力扣Hot100】155. 最小栈
18. ECMAScript 6 入门：字符串的新增方法
19. Yes yes yes yes yes yes
20. mybatis的一级缓存详解

热门文章

1. 交换机双工模式和ip地址概述
2. android更新后忘记密码,教您6种方案解锁LG手机，如果您忘记了密码
3. 大咖说：蜂窝车联网（C-V2X）技术发展、应用及展望
4. 中央一套被抢注成避孕套商标
5. 使用CDN加速你的博客
6. 解决java.io.FileNotFoundException: class path resource [beans.xml] cannot be opened because it does no
7. workgroup计算机打不开,Win10系统网上邻居打不开提示“workgroup无法访问”的解决方法...
8. 机器学习之train_test_split详解
9. c语言桥牌游戏,桥牌游戏介绍
10. 国有企业不能有信息化