Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）

Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）

目录

Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）

一、简单介绍

二、实现原理

三、注意事项

四、安装步骤

node （npm） 的安装

 修改 npm 全局包安装路径 （就可以将全局包不安装在C盘）

安装cnpm,解决npm安装速度慢甚至不能安装的问题

安装 vue cli 环境

使用 vue 命令创建工程，并运行

---

一、简单介绍

       Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Web 前端开发中使用 Vue cli ，环境的安装搭建，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

操作环境：

• win 10
• node 16.14.2 版本
• npm 8.5.0 版本
• @vue/cli 5.0.4

二、实现原理

安装

1、使用 node 的相关命令进行操作者（如果没有安装 node ，需要先安装）

2、npm install -g @vue/cli         安装 （注 ：安装 vue-cli 脚手架目前需要node版本为 v3.0 以上）

创建

1、vue create hello-vue-cli 创建 hello-vue-cli 工程

2、cd hello-vue-cli / npm run serve 运行，输入对应网址即可网页浏览

三、注意事项

1、安装 vue-cli 脚手架目前需要node版本为 v3.0 以上

2、npm install -g @vue/cli  加-g是安装到全局
 

两种安装方式
npm的安装方式有两种，分为全局安装和局部安装。

全局安装就是在任何文件夹都可运行，其实原理也就是写进环境变量，每次在命令行中敲入命令时，根据环境变量的设置寻找对应的可执行程序运行。当选择全局安装时，默认的安装路径为C:\Users\xxx\AppData\Roaming\npm，缓存路径为C:\Users\xxx\AppData\Roaming\npm_cache，其中xxx根据自己是自己系统的用户名。

npm install -g <package_name>

局部安装就是在当前项目中建立包，在当前项目中起作用，当选择项目局部安装包时，默认的安装路径为项目根目录文件夹node_modules。

npm install <package_name>

四、安装步骤

node （npm） 的安装

1、在百度上搜索 下载 nodejs，即可找到下载地址，如图

2、在官网选择自己需要的进行下载，这里以 windows 为例，点击下载即可

下载 | Node.js

3、下载好后，点击安装包，安装即可

4、打开 cmd 窗口（win + R 键，输入 cmd 回车），输入 node -v 和 npm -v 即可看到如下结果说明安装好了

 修改 npm 全局包安装路径 （就可以将全局包不安装在C盘）

1、在 cmd 中输入一下命令进行配置

(根据需要设置文件路径 ，但必须是相同的文件名(xxx\npm_global 和 xxx\npm_cache)\配置)

npm config set prefix "D:\MySoftware\NodejsGlobalPackages\npm_global"
npm config set cache "D:\MySoftware\NodejsGlobalPackages\npm_cache"

2、可以查看一下是否配置成功

npm config ls 

安装cnpm,解决npm安装速度慢甚至不能安装的问题

1、在 cmd 窗口中输入

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

安装 vue cli 环境

1、在 cmd 窗口中输入 cnpm install -g @vue/cli ，进行安装

2、安装过后，我们到npm_global目录下的node_modules看一下，已经安装成功，事实上这就是全局包的安装路径。

3、由于我们之前重新设置了全局环境，现在使用 vue ，可能会报错：vue command not found 。原因很简单，就是我们修改了路径，环境变量却还没配置，所以系统找不到可执行程序。打开环境变量配置，在系统变量中新增NODE_PATH，变量值为设置的安装路径下的 node_modules，如图

 4、然后再设置用户变量中 path，新增一个值，把全局环境配置上，如图

使用 vue 命令创建工程，并运行

1、在 cmd 中切换到工程的创建目录，然后使用如下命令穿件一个测试工程（建议工程不要是驼峰式）

vue create hello-vue-cli 

2、这里我们默认选择 Vue3 进行创建工程，也可以根据需要选择其他的创建方式

3、因为这里没有配置 Yarn ，所以这里使用 Use NPM 进行创建

4、等待一段时间，系统会自动安装创建工程完成

5、安装创建完成， 切换到 hello-vue-cli 工程目录

命令：cd hello-vue-cli

 6、输入命令运行工程服务，即会看到浏览器网址信息

命令：npm run serve

7、输入对应网址信息，即可看到如下，说明 vue cli 创建工程OK