使用Vue脚手架(Vue CLI)创建Vue项目的流程以及node.js的环境变量的配置.

在使用安装Vue CLI之前,需要先安装好node.js,否则在使用nmp 命令安装Vue CLI时,会报错.(npm 不是可用命令 或 内部命令).

该流程中使用黑窗口时全程请以管理员身份打开,否则在配置过程中会因权限问题导致失败.

1.安装node.js

链接:Node.js (nodejs.org)

 (1).选择第一个,点击下载.

(2).安装

        1.点击next

         2.修改安装路径(可按照自己意愿修改)

         3.继续点击 next

         4.不选中,继续下一步

         5.完成安装

        6.点击Finish

2.配置node.js的环境变量

        (1).找到node.js安装目录打开,新建两个空文件夹

                node_cache:node缓存文件夹

                node_global:使用全局安装命令时,将文件安装在此文件夹(npm install express -g )

     

建完这两个文件夹后,记住路径.  

         (2)以管理员身份打开黑窗口输入下面两行命令:

                npm config set prefix "D:\softwore\node.js\node_global"   //设置全局模块安装路径

                npm config set cache "D:\softwore\node.js\node_cache" //设置全局缓存存放路径

D:\softwore\node.js\node_global和D:\softwore\node.js\node_cache更换为你电脑上这两个文件夹的路径

        检测配置是否成功的方法:

         按下回车,稍作等待之后,检测node_global目录下是否生成了mode_modules,并检查里面是否存在express文件夹.

        (3)在设置内找到系统信息,点击高级系统设置,找到环境变量选项

 

         (4) 在系统变量处点击新建,按照图中内容输入

 路径请修改为自己的路径,请注意此处的node_modules文件夹是下载node.js时自带的那一个.

        (5)修改Path内的路径

 我的已经修改过了,第一次点击进去Path时,会有一个 C:\user\zhangyunfei2021\AppData\Roaming\npm的路径,直接把此路径修改为你自己电脑上node_global上的路径或者删除之后新建一个路径均可.

C:\user\zhangyunfei2021\AppData\Roaming\npm为我电脑上 npm的默认保存路径,只要将你的默认的npm文件夹的路径删除或者修改即可.

配置完毕后,重启电脑.

3.安装Vue CLI

(1).在安装前先使用一下国内的阿里或者淘宝镜像,否则可能会安装失败.

使用方法:

以管理员身份运行黑窗口,输入npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功
npm config get registry 或 npm info express

(2).安装Vue CLI

vue create my-project

以管理员身份运行黑窗口 , 输入 上面命令后,等待安装完成. 完成安装后需要先关闭黑窗口.在重新打开.

4.创建一个Vue项目

vue create my-project

       (1)  找到你想要创建项目的文件夹 , 在黑窗口中使用命令符进入你想要创建项目的文件夹,输入上面的命令 (my-project为项目名称)

        (2) 选择你使用的Vue版本是2还是3

         (3)选择完成之后,点击回车,等待项目创建完毕

         创建完成之后,会在你创建项目的文件夹中生成一个my-project的Vue项目.

        (4)在下方执行蓝色的两条命令

cd vue_test:进入项目文件

npm run serve:编译项目文件,如果是第一次执行此命令,电脑可能会弹出防火墙,弹出点击允许即可.

        (5)执行完毕

        (6)在浏览器内输入Local后的地址(自己使用)或者NewWork后的地址(自己使用或者让在同局域网下的其他人使用)

         

 此页面是创建Vue项目时,自动生成的一个组件