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

已于 2023-09-15 14:39:39 修改
阅读量5.9k 收藏 42
点赞数 10
分类专栏： Vue 文章标签： vue.js node.js npm 经验分享 前端
于 2022-05-13 18:12:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42701659/article/details/124756550
版权

目录

前言

  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 -g

npm i @vue/cli -g

cnpm i @vue/cli -g

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

参考链接：

不同版本vue-cli区别 详解

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

npm list vue -g

在这里插入图片描述

vue --version

vue -V

在这里插入图片描述

4、vue create 默认创建 Vue 项目

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

vue create testvue

在这里插入图片描述
选择 Default ([Vue 3] babel, eslint)，并回车
在这里插入图片描述
在这里插入图片描述

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

cd testvue

npm 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命令大全

沐 修
关注
  • 10
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3.X快速创建项目的方法步骤
10-15
主要介绍了vue-cli3.X快速创建项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于springboot2+vue2.X的校园招聘系统.zip
05-16
系统简介：该系统基于springboot2，vue2.X等技术实现了校园招聘系统，为求职者与招聘人员提供了便捷的在线招聘信息平台。 系统环境配置 系统开发平台：JDK1.8+Windows7+Maven3.6.1 开发语言：JavaEE+vue 后台框架：Springboot 前端：Vue2.9.6 数据库:MySql5.7 开发环境: Intelij Idea 浏览器: Chrome或360浏览器 系统搭建步骤 前置条件：系统已经安装了Mysql5.7，Mysql工具(Navicat)，JDK1.8，Maven3.6.1，vue3.0以下开发环境，Intelij Idea，Chrome或360浏览器 导入数据库 编译前端代码vue：编译(cnpm install),试运行(npm serve) 导入后端代码springboot 启动springboot
node.js与npm的版本与Vue2和Vue3版本运行，nvm的使用
maliao5的博客
03-20 687
node.js与npm的版本与Vue2和Vue3版本运行，nvm的使用
逐浪CMSv8.2全面发布-集成Node与Vue脚手架和PS脚本支持的新一代网站管理系统
10-20
- 智能图表系统优化发布 - 修缮会员中心头像上传BUG - 增加定时任务组件，基于Quartz Scheduling Framework for .NET 3.07 - 修复会员中心-问卷投票-好友申请等社区功能 - 同时增加与vueJS、PowerShell集成的强大功能，用于构建企业级WEB平台。
node 版本管理工具 实现vue2与vue3切换开发
08-18
node 版本管理工具 实现vue2与vue3切换开发
Windows下安装vue开发环境
一只小木头的博客
10-19 554
windows下安装vue开发环境 1、安装npm 官网node进行下载 Node.js 是一个开源与跨平台的JavaScript 运行时环境。 2、检测nodejs安装 当执行完上步安装包安装后，需要进行安装是否成功，win+r打开运行，输入cmd后进入命令行界面。分别输入node -v和npm -v命令进行node的版本号和npm的版本号的查看。 安装完后的目录如下图所示 3、配置npm安装全局模块路径与缓存路径 NPM是随同NodeJS一起安装的包管理工具 一般，在进行npm install
windows下vue-cli及webpack搭建安装环境
08-30
主要介绍了windows下vue-cli及webpack搭建安装环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Windows安装vue
w_rcss的博客
03-29 2365
Vue 安装 下载安装包： https://nodejs.org/en/download/ ，安装 cmd测试 C:\Users\w_rcss>node -v v16.14.2 C:\Users\w_rcss>npm -v 8.5.0 安装路径下创建node_global（默认安装目录）,node_cache（缓存日志目录） 安装路径：D:\Environment\node 缓存日志路径：D:\Environment\node\node_cache 默认安装路径：D:\Enviro
Windows下--VUE安装
白舟的博客
08-10 542
**安装VUE前得先把node.js安装好， 安装完node.js之后，npm也会自动安装** ** 一，在文件夹中建立一个project ** 在此文件夹下进入cmd检查node.js是否安装好 命令：node -V npm -V 二. 全局安装脚手架工具vue-cli 命令：npm install --global vue-cli 三. vue项目初始化命令如下，若没有安装webpack，则先安装webpack npm install -g webpack vue init
Windows系统安装vue
qq_44687477的博客
07-21 171
环境配置 1.安装git工具 https://github.com/git-for-windows/git/releases/download/v2.27.0.windows.1/Git-2.27.0-64-bit.exe 2.安装node https://npm.taobao.org/mirrors/node/v14.5.0/node-v14.5.0-x64.msi 在git工具中输入node -v检验是否成功 3.安装cnpm git工具中输入：npm install -g cnpm --registr
vue001——window环境下安装vue.js开发环境
weixin_45084986的博客
02-20 1974
一、npm: Nodejs下的包管理器。 打开CMD，检查是否正常 再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\node-v16.14.0-x64 然后运行以下2条命令 npm config set prefix “D:\node-v16.14.0-x64\node_global” npm config set cache “D:\node-v16.14.0-x64\n
Django2.x与Vue2.x融合开发的Django-Vue-Extend项目源码
03-26
项目概述：Django-Vue-Extend 本项目是一个融合了Django2.x和Vue2.x双技术栈的集成...简而言之，Django-Vue-Extend项目是基于Django2.x和Vue2.x的经典融合，旨在为开发者提供一个可扩展、易于维护的全栈开发解决方案。
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
10-14
主要介绍了全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
node.js必须是10版本的，不清楚是多少版本，终端输入命令行node -v;
解决vue[email protected]安装不成功的问题及搭建ts-vue项目
10-15
主要介绍了解决vue[email protected]安装不成功的问题及搭建ts-vue项目.文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 638
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 264
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 287
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 356
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
windows11安装卸载node.js、vue-cli、element-ui
06-06
Windows 11 安装、卸载 Node.js、Vue CLI 和 Element UI 的步骤如下： 安装 Node.js: 1. 前往 Node.js 官网 (https://nodejs.org/en/) 下载 Windows 版本的 Node.js 安装程序。 2. 运行下载的安装程序，按照提示完成安装过程。 卸载 Node.js: 1. 进入 Windows 11 的“控制面板” -> “卸载程序”页面。 2. 找到 Node.js，选择卸载。 安装 Vue CLI: 1. 打开命令行工具（Windows键+R，输入cmd）。 2. 输入以下命令安装 Vue CLI： ``` npm install -g @vue/cli ``` 3. 等待安装完成即可。 卸载 Vue CLI: 1. 打开命令行工具（Windows键+R，输入cmd）。 2. 输入以下命令卸载 Vue CLI： ``` npm uninstall -g @vue/cli ``` 安装 Element UI: 1. 打开命令行工具（Windows键+R，输入cmd）。 2. 进入 Vue 项目所在目录，输入以下命令安装 Element UI： ``` npm install element-ui -S ``` 3. 等待安装完成即可。 卸载 Element UI: 1. 打开命令行工具（Windows键+R，输入cmd）。 2. 进入 Vue 项目所在目录，输入以下命令卸载 Element UI： ``` npm uninstall element-ui -S ``` 以上是 Windows 11 安装、卸载 Node.js、Vue CLI 和 Element UI 的基本步骤，具体操作根据实际情况可能会有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值