环境准备

详讲网页窗体的开发环境搭建。

开发工具

网页窗体开发基于nodejs环境，如果本机没有安装nodejs，请到官网下载nodejs，并安装。

名称	介绍	下载安装
Node.js(必要)	基于 Chrome V8 引擎的 JavaScript 运行环境。	官网下载
Google Chrome	谷歌网络浏览器	官网下载
vue-devtools	调试Vue.js应用程序的浏览器插件。	本地下载|GitHub下载
Visual Studio Code	免费开源的现代 Web 和云应用的跨平台 编辑器。	官网下载

1. 安装 Node.js

1.1 安装成功后检验

开始菜单 ➡ 运行 ➡ 输入“cmd” ➡ 命令提示符窗口➡ 输入：

$ node --version

运行结果：

出现版本号证明安装环境成功。

info

注意：

Node.js安装完成后将自动增加路径系统PATH环境变量，如果没有需要手动添加。

环境变量的配置有时候需要重启系统才会生效!

1.2 使用CNPM

Node.js安装完后后自带npm，国内直接使用 npm 的官方镜像是非常慢的。

所以推荐使用淘宝NPM官网定制的cnpm命令行工具代替默认的 npm，开始菜单 ➡ 运行 ➡ 输入cmd ➡命令提示符窗口➡ 输入：

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

运行结果：

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

2. 安装 Visual Studio Code

安装比较简单，此处省略。

2.1 VSCode禁止运行脚本

在vscode终端中使用cnpm/yarn命令时报错： "因为在此系统上禁止运行脚本。"原因是因为PowerShell执行策略问题。

解决方法：

以管理员身份运行VSCode;

命令提示符窗口➡ 输入：

$ get-ExecutionPolicy

​ 显示Restricted，表示禁止状态;

启用:

$ set-ExecutionPolicy RemoteSigned
$ get-ExecutionPolicy

​ 显示RemoteSigned，表示启用状态;

运行结果：

3. 安装vue-devtools调试工具

3.1 Chrome安装调试工具

打开Chrome浏览器，解压缩shell-chrome.rar后直接把 shell-chrome 文件夹拖进Chrome浏览器的扩展程序页面。

（注意：安装成功后请不要删除解压文件。）

使用Chrome浏览器打开一个网页窗体（内置vue）的页面，然后按F12打开 开发者工具：

3.2 FireFox安装调试工具

在FireFox浏览器按F12打开 开发者工具：