下载并安装node.js

一、下载node.js

网址：https://nodejs.org/en/download

1.访问官网，选择自己想要的版本进行下载

2.下载完毕后，运行其安装程序，按照提示步骤操作安装node.js。在此过程中，需知道自己指定安装的路径位置

3.安装完成后在cmd中输入node –v和npm –v验证是否安装成功。

二、更改全局安装目录和缓存日志目录，配置环境变量

1.在nodejs安装的目录创建两个空文件夹：node_cache和node_global。

2.修改node_cache和node_global的操作权限

3.将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

        分别在cmd中输入下面两个命令

npm config set prefix "你的安装目录\node_global“

npm config set cache "你的安装目录\node_cache"

注：红色部分可以直接在刚创建的对应的文件夹中，复制路径

例：

4.打开环境变量设置界面（此电脑->右键-> 属性-> 高级系统设置-> 环境变量）

        将用户变量最后一行  C:\Users\你的用户名\AppData\Roaming\npm 

        修改为 你的安装目录\node_global

5.系统变量中新增一个变量，如下：

变量名：NODE_PATH

变量值：你的安装目录\node_modules

6.系统变量中的path增加下面二个

        %NODE_PATH%\node_modules

        %NODE_PATH%\node_global

三、npm包管理器

npm（Node Package Manager）是Node.js默认的包管理工具，用来解决Node.js代码部署问题，安装Node.js时会自动安装相应的npm版本，无需单独安装。使用npm包管理工具可以解决如下场景的需求：从npm服务器下载第三方包或命令程序。将自己编写的包或命令程序上传到npm服务器。

1.Npm配置淘宝镜像

管理员身份运行cmd,安装淘宝镜像cnpm

执行以下命令:

        npm config set registry https://registry.npmmirror.com

        npm install -g cnpm@latest

查看cnpm配置修改是否成功

        cnpm config list 或者 npm config list

        cnpm –v

出现下面这行内容表示cnpm安装成功

​

四、npm包管理工具安装vue

1.打开Windows的cmd命令窗口，执行命令：npm install vue 即可安装Vue.js

​

2.继续输入命令：npm info vue，可以查看vue模块的信息

​

五、Vue CLI构建项目

1.通过npm全局安装@vlue/cli脚手架命令如下：

npm install -g @vue/cli

2.Vue CLI安装成功后，可使用vue  -V命名查看当前版本号

3.使用vue create命令创建项目，该命令会自动生成项目所需的文件、目录、配置和依赖。比如要创建一个名为helloworld的项目，其命令如下：

vue create helloworld

4.运行上面的命令后，选择vue2或vue3即可，也可选择自定义，选择自己所需的

5.选择完成后，项目就创建成功了，然后输入以下命令就可进入项目并启动

        cd helloworld

        npm run serve

六、Vue-devtools扩展工具的安装

        Vue-devtools插件提供了一个界面，用于调试Vue.js应用，可以帮助开发者查看Vue.js组件和全局状态管理器Vuex中记录的数据。使用时只需下载官方压缩包，配置Chrome浏览器的扩展程序即可使用。

下载网址：

        https://chrome.zzzmh.cn/index

1.下载好之后，按照下图的操作方法将下载好的插件拖入到扩展程序中，需打开开发者模式，允许访问文件网址权限打开。

2.安装好之后，创建一个vue实例就可测试是否有用。打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看修改数据，进行调试。

以上内容为上课笔记，仅供参考！