Vue安装的详细步骤摘要

安装NodeJs

首先，解释什么是nodejs，为什么要安装node。节点的优势？

Node.js是一个运行在chromeJavascript(俗称GoogleV8引擎)中的开发平台，用于方便快捷地创建服务器端网络应用。也可以理解为轻量级的JSP或PHP环境。如果用于开发Web应用程序，有时会方便得多。

node.js最大的优势是处理并行访问。如果一个web应用程序同时有多个访问连接，它就可以展示使用Node.js的优势.另一个优点是，使用javascript作为服务器端脚本语言可以消除浏览器端与js脚本的一些冲突。甚至充分发挥javascript动态编程的特点，在服务器和浏览器之间建立直接的动态程序。一般来说，node.js可以像PHP一样开发动态网站和web应用。

安装步骤

安装环境：Windows7 x64

1.第一步是检查计算机是否安装了node.js

(1).start-search cmd- enter，在命令行中输入node -v，然后输入。如果“‘节点’不是内部或外部命令或可运行的程序……”出现，表示没有安装node.js

(2).https://nodejs.org/en/下载安装node.js(选择LTS格式)，下载后双击开始安装，点击下一步：

(3)勾选“我接受许可协议中的条款”表示同意许可协议，点击“下一步”，出现如下界面：

(4)的默认安装路径。node.js是“C: 程序文件nodejs”，其他磁盘可以修改(我选择安装在D盘)。点击下一步，打开安装模式和模块选择界面：

(5).然后单击下一步：

(6).确认后，单击安装开始安装：

(7).耐心等一会儿。安装完成后，单击完成：

(8).打开cmd(Windows R)并检查节点是否安装成功：

首先，测试npm是否安装成功。因为nodejs的新版本已经集成了npm，所以npm之前已经安装在一起了。您也可以使用cmd命令行输入“npm -v”来测试安装是否成功。

(这个安装比较慢，也可以用淘宝镜像安装。输入NPM安装-GCNPM-注册表=https://Registry.npm.taobao.org，输入，等待安装.(windows以管理员身份安装))

2.安装全局网络包

在命令行上，输入：npm install webpack -g (C驱动器C)进行全局安装：

3.安装vue-cli脚手架工具

在命令行中输入：npminstall-gvue-CLI(驱动器c)以全局安装：

输入：vue并输入。如果出现vue消息，说明安装成功

4.创建项目

关闭命令行，选择任意磁盘(这里我选择d盘，新建一个名为mypro的文件夹)，将mypro文件夹放在HBuilder中，在d盘中输入mypro文件夹，在这里右键打开命令窗口，输入vue init webpack mypro输入：

输入项目文件夹：CD mypro(CD vue init web pack mypro中的项目名称mypro)，按Enter键进入项目文件夹：

输入：npm安装初始化，并安装依赖包node_modules

6.安装完成后，输入：npm run dev运行测试：

7.最终的浏览器弹出结果是：

补充：

Vue cli3安装：

一、安装

通过npm install -g @vue/cli或纱线全局add @vue/cli检查vue -V的安装情况

第二，创建一个新项目

npm创建管理员

Admin是您需要创建的项目的名称。如果你是第一次使用3.0版本，没有前两个，只有后两个。这是给你选择的。第一个是默认配置，一般选择第二个，自己配置，这里选择最后一个。

第三，进入后会弹出以下选项

当你选择的时候，上图的东西就会出现。在这里可以自由选择使用哪种配置，按上下键选择哪种，按空格键确认，按回车键进入下一步。在这里你可以根据自己的需要进行选择。

第四，安装预处理语言

这一步问你安装哪种CSS预处理语言，你可以根据自己的需要选择

动词（verb的缩写）选择自动代码格式检测

上面一个问题是关于代码格式检测的。使用vscode编辑器的Pretender-CodeFormatter插件，您可以选择下一个

第六，保存设置

上图第一个选项是问你是否保存刚才的配置。选择“确定”后，下次将创建一个新项目，并且您将拥有之前选择的配置，因此您不必再次重新配置它。

七、选择配置文件位置

上图的意思是问你配置文件比如babel，postcss，eslint eslint放在哪里。第一个是放一个单独的文件，第二个是放在package.json里面，建议这里放一个单独的配置文件，选择第一个

八、保存设置的最后一步

上面倒数第二行询问您是否希望将上面的内容保存为未来项目的预配置。最后一个是描述项目。您可以随意选择，然后单击“确定”下载模板

九.下载模板

Cd管理员进入项目并启动服务npm运行服务。这里没有vue.config.js文件

X.为项目配置创建一个新的vue.config.js文件

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。