Vue-环境搭建

一、安装node.js

1、为什么要安装node.js

安装Vue的前置条件是安装node.js。

脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的解析器角色。而对于需要独立运行的JS，nodejs就是一个解析器。

每一种解析器都是一个运行环境，不但允许js定义各种数据结构，进行各种计算，还允许js使用允许环境提供的内置对象和方法做一些事情。如运行在浏览器中的js的用途是操作DOM，浏览器就提供了document之类的内置对象。而运行在nodejs中的js的用途是操作磁盘文件或搭建http服务器，nodejs就相应提供了fs,http等内置对象。

2、安装步骤

2.1、下载node-v8.11.1-x64.msi

下载地址：nodejs官网。

2.2、安装node-v8.11.1-x64.msi

• 双击node-v8.11.1-x64.msi，点击Next、显示Node.js的许可协议页面：
  

2.3、勾选同意许可协议

• 勾选“I accept the terms in the License
  Agreement”同意许可协议，并单击Next下一步，出现如下界面：
  

2.4、修改安装路径

• Node.js默认安装路径为“C:\Program
  Files\nodejs\”，可以修改，在这里我改到了D盘，单击Next，出现安装模式及模块选择界面：
  

2.5、添加到环境变量

• 这里我直接（点击Add to PATH）Next下一步，准备就绪，准备安装：
  

2.6、安装

• 确认无误后，点击Install，开始安装：
  

• 半分钟后，安装完成，点击Finish即可：
  
  

2.7、配置环境变量

默认，Node.js安装完毕，会自动在系统的path环境变量中配置了node.exe的目录路径；但是可能你安装完成后，dos命令下输入node提示错误（需配置环境）。

2.8、查看node版本

• 检测是否安装成功：点击开始-运行-cmd（win+R），打开dos，输入“node --version”检查Node.js版本：
  

2.9、配置npm的全局模块的存放路径、cache的路径

在“命令提示符”窗口中执行命令：

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

2.10、查看查看npm全局配置

在“命令提示符”窗口中执行命令：

npm config get

2.11、查看当前npm全局配置具体值

如果你只想查看某个键对应的值，可以在命令后添加键名，如：

npm config get registry

二、安装脚手架

1、为什么要安装脚手架

• vue脚手架用于自动生成vue和webpack的项目模板；
• vue脚手架是一个快速构建vue项目的工具，可以自动安装vue所需要的插件，避免手动安装各种插件，以及寻找各种cdn并一个个引入的麻烦。

2、安装步骤

2.1、全局安装

打开“命令提示符”窗口，在需要创建脚手架的目录输入：

  npm install -g @vue/cli

等待几分钟，执行有点慢。

出现版本号表示脚手架已经创建成功！

2.2、兼容2.0（支持npm run dev等命令）

打开“命令提示符”窗口，输入：

npm i -g @vue/cli-init

出现如下页面表示已经执行成功！

2.3、配置环境变量

4. 安装以上两个之后，配置vue的环境变量，找到vue.cmd的目录所在（如果忘记了安装在哪里，可以全盘搜索），复制路径，在path中新增环境变量，如下图：
   
5. 在命令提示符中输入：vue --version 或 vue -V 查看当前版本。如下
   提示错误：SyntaxError: Unexpected token { at createScript…
   解决办法：安装最新的node.js，具体步骤见上面！！！
   
6. 显示版本号则表示安装成功！
   

2.4、卸载脚手架

打开“命令提示符”窗口，输入：

npm uninstall @vue/cli -g

三、安装webpack

1、为什么要安装webpack

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

2、安装步骤

2.1、全局安装

在命令行窗口，执行如下命令：

 npm install -g webpack

npm webpack webpack-cli -D
npm install -D webpack webpack-cli

2.2、指定目录安装

在命令行窗口，执行如下命令：

npm install --save-dev webpack-cli -g

出现下图表示安装成功。

2.3、查看版本

在命令行窗口，执行如下命令：

webpack --version

当出现CLI for webpack must be installed时，输入yes，如下表示安装成功。

四、安装visual studio

1、为什么要安装visual studio

Visual Studio是微软公司开发的一款强大的集成开发环境（IDE），它可以帮助开发人员进行各种编程任务，包括设计、开发、测试、调试和部署应用程序。

2、安装步骤

1. 访问官网visualstudio官网，下载文件。
   
2. 双击文件安装软件，点击下一步。
   
3. 选择目标位置
   
   
   
4. 创建桌面快捷方式,添加到PATH
   
5. 安装并启动。

五、新建vue项目

1、新建空文件夹

在电脑中创建一个空文件夹用于存放vue项目（在vue中,项目名不能带中文、大写字母、特殊符号,项目名可采用小写方式,以短横线分隔）

2、打开软件

打开visual studio code软件，点击File(文件)–>open Folder（打开文件夹）–>
选择新建的空文件夹，点击确定。

3、新建项目

点击ctrl+shift+~键，打开终端窗口，输入vue init webpack [项目名]，点击enter键一键到底，等待下载（时间比较久）。
如出现错误vue-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREFUSED 127.0.0.1:443
或出现错误vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止
或出现错误Cannot find module 'D:\Program Files\nodejs\node_global\node_modules@vue\cli\bin\vue.js’见下方参考资料解决。

4、创建成功

出现如下页面说明创建项目成功了，左上角就出现了如下的项目结构，就可以开发vue项目了。

参考资料

NodeJS入门（一）—nodejs详细安装步骤
Vue脚手架安装
webpack安装使用教程
查看npm配置
报错1：vue-cli · Failed to download repo vuejs-templates/webpack-simple: read ECONNRESET
报错2：npm安装vue-cli报错internal/modules/cjs/loader.js（Error: Cannot find module ‘D:\Program\nodejs\node_global\node_modules\vue-cli\bin\vue’）
报错3：vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本”的解决方法