本文目录：

• 1、安装npm
• 2、验证安装
• 3、npm更换国内镜像
• 4、安装vue-cli脚手架
• 5、安装vue-cli可能遇到的错误
• 6、使用Vue-cli脚手架搭建Vue工程
• 7、配置文件package.json解读
• 8、vue项目启动与打包

---

1、安装npm

创建 Vue-cli 脚手架需要两个依赖：

• node 环境（很多工具的运行环境）
• npm 包管理器（下载各种第三方库）

下载并安装 nodejs（安装 nodejs 自带 npm 包管理器），两个中文网：

① http://nodejs.cn/download/

② https://nodejs.org/zh-cn/download/

建议下载长期支持版本（LTS），安装界面为英文，大部分使用默认设置，看不懂的点下一步就可以

2、验证安装

查看 node 和 npm 版本，在终端中（windows 为 cmd），输入以下命令验证是否安装成功

在 Windows 中，还可以输入“echo %PATH%”查看环境变量，路径中若出现 nodejs 和 npm 相关，即成功。

3、npm更换国内镜像

npm默认使用国外源（镜像地址），速度较慢，很有可能报错请求不到

查看原地址：

使用如下命令将npm源地址更换为阿里源：

4、安装vue-cli脚手架

命令中的“-g”表示全局安装，可省略。不带 -g 会将 node_modules 安装到当前目录，后面再创建 vue 项目时，也会受限于当前目录内，建议不要省略。

若出现错误：npm WARN deprecated... ，构成原因包括但不限于：npm 的版本过高或过低、npm 镜像问题、缺少 package.json、npm 下载网速不够等，可以尝试更换镜像源，可以暂时忽略。

解决方法： 可尝试改用 cnpm 指令下载，若没有 cnpm，参考阿里镜像网站：http://www.npmmirror.com/

安装完成后，使用下面命令查看 vue-cli 脚手架版本号，注意命令区分大小写

5、安装vue-cli可能遇到的错误：

① 在 linux 系统中，vue 脚手架提示安装成功，使用 vue 命令却提示：-bash: vue: command not found。

首先查看npm全局路径：

npm root -g

进入全局路径下面的 @vue/cli/bin 目录，可以看到 vue.js，将 vue.js 软连接到 /usr/bin/vue，以上面路径为例：

ln -s /opt/node-v20.18.0-linux-x64/lib/node_modules/@vue/cli/bin/vue.js /usr/bin/vue

再次查看 vue 脚手架版本：

若存在问题可以重新指定 npm 全局路径，比如指定为 /www 目录：

npm config set prefix /www

新路径为：/www/lib/node_modules，创建 vue 脚手架时会自动生成 lib 和 bin 目录。

⑤ 在windows系统中，Windows PowerShell 若报错：“vue：无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本...”

以管理员身份运行Windows PowerShell，输入下面命令

然后输入“Y”即可解决

整个流程如图

6、使用Vue-cli脚手架搭建Vue工程

① 打开终端，进入项目文件夹，输入命令

② 选择配置，默认的配置会安装 es6 转 es5、eslint 代码格式化工具，多数情况选择第三项：手动选择特性，可以指定安装哪些插件

③ 进入第二页，按上下箭头：上下选择；按空格键：选中/取消选中。建议取消 Linter（不使用格式校验），留下 Bable 即可

④ 选择Vue版本

⑤ 询问配置文件放在哪里，第一个是独立文件，第二个是放到根目录的“package.json”文件中，独立文件方便管理，新手建议 package.json

⑥ 是否将刚才的配置保存的项目中，下次创建项目时可直接使用，保存输入y，不保存输入n

⑦ 然后是安装过程，安装完成后，查看项目结构

7、配置文件package.json解读

8、vue项目启动与打包

① 启动项目：在项目文件夹中打开终端，输入以下命令启动项目，在浏览器中输入提示的 URL 即可访问项目

注意：在 linux 中强制结束 npm run serve 时，仅使用 kill 杀掉 npm run serve 进程，依然能通过浏览器访问，必须 kill 杀掉 node 进程，才能彻底结束。

启动时如遇错误：/node_modules/.bin/vue-cli-service: Permission denied，说明node_modules文件夹没有权限，删掉node_modules，重新npm install就可以

② 如果需要将项目部署到服务器上，则需要将项目打包生成 html、js 等通用文件，然后将打包后的文件上传到服务器上。通过以下命令来打包项目

打包完之后，会在项目根目录下生成一个dist目录，里面包含了所有的静态文件。将这些文件上传到服务器上，然后通过web服务器（如Apache、Nginx）来提供服务即可

项目创建完成，开发过程中，注意文件引入方式